1.Vue-cli和Vite

在瀏覽器中中直接運行的這種開發(fā)方式已經不用了?，F(xiàn)在前后臺完全分開，那么前端程序需要借助專業(yè)的開發(fā)工具去做，那么專業(yè)開發(fā)工具有很多，比如webpack、rollup、尤雨溪搞的vite等，webpack是目前最主流的前端開發(fā)工具，叫打包器，就是我們用webpack去開發(fā)，開發(fā)好以后打個包。腳手架的背后就是在用webpack在打包。

(1) Vue CLI

Vue CLI 4.x以上，Node.js版本 8.9以上

npm install -g @vue/cli
# OR
yarn global add @vue/cli
# 查看版本
vue --version

# 創(chuàng)建項目
vue create hello-world
# 運行
npm run serve

main.js

// vue2
/* import Vue from 'vue'
import App from './App.vue'
new Vue({
    render:h=>h(App)
}).$mount("#app") */

// vue3
// 從Vue身上導入createApp()函數(shù)
import { createApp } from 'vue'
// 導入App組件
import App from './App.vue'
// 使用createApp()函數(shù)根據App組件創(chuàng)建一個Vue實例，并掛載到#app容器中
createApp(App).mount('#app')

(2) Vite

Vite中文網官方
Node.js版本 12.0以上

# 安裝Vite
npm init vite@latest
# 安裝依賴
npm install
# 運行
npm run dev
# 打包
npm run build

2.計算屬性computed

(1) Vue3中依然可以使用Vue2中的編碼方式

<div class="child">
  <h2>研究一哈計算屬性</h2>
  <div>姓：<input v-model="firstName" /></div>
  <div>名：<input v-model="lastName" /></div>
  <!-- <div>姓名：{{ fullName }}</div> -->
  <div>姓名：<input v-model="fullName" /></div>
  <hr />
  <ul>
    <li v-for="item in goodses" :key="item.id">
      {{ item.name }}--{{ item.price }}
    </li>
    <li>總價：{{ totalPrice }}</li>
  </ul>
</div>

export default {
  name: "Child",
  data() {
    return {
      firstName: "張",
      lastName: "三",
      goodses: [
        { id: 1, name: "蘋果", price: 5 },
        { id: 2, name: "普通", price: 8 },
        { id: 3, name: "香蕉", price: 10 },
      ],
    };
  },
  methods: {},
  computed: {
    // 計算屬性，在定義的時候是函數(shù)，使用的時候是屬性。
    // fullName() {
    //   console.log("fullName方法執(zhí)行了");
    //   return this.firstName + "." + this.lastName;
    // },
    fullName: {
      get() {
        console.log("fullName方法執(zhí)行了");
        return this.firstName + "." + this.lastName;
      },
      set(val){
          let arr = val.split('.')
          this.firstName = arr[0]
          this.lastName = arr[1]
      }
    },
    totalPrice() {
      console.log("totalPrice方法執(zhí)行了");
      return this.goodses.map((r) => r.price).reduce((a, b) => a + b, 0);
    },
  },
};

(2) vue3中全新的編程方式：組合式API

computed計算屬性是只讀的，不能改。計算屬性通常是一個方法，也可以是一個對象。在對象里面寫2個方法，一個get：( )=>{ }，一個set：( val )=>{ }
vue3中全新的編程方式：組合式API
導入組合式API

import { ref, reactive,computed } from "vue";

export default {
  name: "Child",
  setup() {
    // 定義姓和名
    let firstName = ref("張")
    let lastName = ref("三")
    // 定義計算屬性，返回姓名
    let fullName = computed({
        // get方法返回值
        get:()=>{
            return firstName.value+'.'+lastName.value
        },
        // set方法設置值
        set:(val)=>{
            let arr = val.split('.')
            firstName.value = arr[0]
            lastName.value = arr[1]
        }
    })

    // 定義商品
    let goodses= reactive([
        { id: 1, name: "蘋果", price: 5 },
        { id: 2, name: "普通", price: 8 },
        { id: 3, name: "香蕉", price: 10 },
    ]);
    // 定義計算屬性，返回商品的總價
    let totalPrice = computed(()=>{
        return goodses.map((r) => r.price).reduce((a, b) => a + b, 0);
    })
  
    return {
        firstName,
        lastName,
        fullName,
        goodses,
        totalPrice
    };
  }
};

3.偵聽器

(1) Vue3中依然可以使用Vue2中的編碼方式

<div class="child2">
    <h2>這里是偵聽器</h2>
    <div>
      薪資：{{ money }}
      <button @click="money += 100">加薪</button>
    </div>
    <div>
      學生信息：{{ student }}
      <button @click="student.name += '!'">修改姓名</button>
      <button @click="student.age += 1">修改年齡</button>
      <button @click="student.car.price += 1">修改汽車價格</button>
      <button @click="student.plane.price += 1">修改飛機價格</button>
      <button @click="student.plane.driver.name = '冰冰'">修改飛機的駕駛員</button>
    </div>
</div>

vue2的做法，數(shù)據和監(jiān)聽不在一起。
watch：{ 偵聽者名字（）}
偵聽器如果是一個函數(shù)的形式，只有在偵聽到數(shù)據發(fā)生變化時，才會執(zhí)行。如果，要讓偵聽器函數(shù)在加載時，就立刻執(zhí)行一次，需要改成對象的形式。
watch：{ 偵聽者名字：{ handler(nval, oval) {console.log(nval, oval) } } }
immediate:true 通過設置immediate屬性為true，讓偵聽器立刻執(zhí)行一次。

<script>
export default {
  name: "Child2",
  data() {
    return {
      money: 10000,
      student:{
          name:'張三',
          age:20,
          car:{
              name:'奔馳',
              price:50
          }
      }
    };
  },
  watch: {
    // 偵聽器，如果是一個函數(shù)的形式，只有在偵聽到數(shù)據發(fā)生變化時，才會執(zhí)行
    // 如果，要讓偵聽器函數(shù)，在加載時，就立刻執(zhí)行一次，需要改成對象的形式
    // money(nval, oval) {
    //   console.log(nval, oval);
    // },
    money:{
        immediate:true,   // 通過設置immediate屬性為true，讓偵聽器立刻執(zhí)行一次
        handler(nval, oval){
            console.log(nval, oval);
        }
    },
    student:{
        deep:true,
        handler(nval, oval){
            // 注意：沒有辦法保留舊值
            console.log(nval, oval);
        }
    }
  },
};
</script>

(2) vue3中全新的編程方式：組合式API

watch函數(shù)，第一個參數(shù)：監(jiān)聽誰，第二個參數(shù)：回調函數(shù)，第三個參數(shù)：配置對象。
watch(
①監(jiān)聽者,
②(nval, oval) => {console.log(nval, oval)} ,
③{ immediate: true }
);
vue3，建議我們，監(jiān)視對象時，指定監(jiān)視對象的屬性。
注意：第一個參數(shù)是一個函數(shù)，由該函數(shù)返回指定對象中監(jiān)視的屬性。
watch(
①()=>{return student.age},
②(nval,oval)=>{console.log(nval, oval)}
)
如果監(jiān)視的對象屬性，也是一個對象，默認不開啟深度監(jiān)視，需要手動開啟。
watch(
①()=>{return student.car},
②(nval,oval)=>{console.log(nval,oval)},
③{deep:true}
)

<script>
// 導入組合式API
import { ref, reactive, watch,watchEffect } from "vue";
export default {
  name: "Child2",
  setup() {
    // 定義薪資
    let money = ref(10000);
    // watch函數(shù)，第一個參數(shù)：監(jiān)聽誰，第二個參數(shù)：回調函數(shù)，第三個參數(shù)：配置對象
    watch(
      money,
      (nval, oval) => {console.log(nval, oval)},
      { immediate: true }
    );
    // 定義學生對象
    let student = reactive({
      name: "張三",
      age: 20,
      car: {
        name: "奔馳",
        price: 50,
      },
      plane:{
        name:'東方',
        price:500,
        driver:{
          name:'彬彬',
          age:20
        }
      }
    })
    // 監(jiān)視student的變化
    // 注意：監(jiān)視對象默認開啟深度監(jiān)視，并且無法關閉。所以直接監(jiān)視整個對象不好。
    // watch(
    //   student,
    //   (nval,oval)=>{console.log(nval, oval)}
    // )

    // vue3，建議我們，監(jiān)視對象時，指定監(jiān)視對象的屬性。
    // 注意：第一個參數(shù)是一個函數(shù)，由該函數(shù)返回指定對象中監(jiān)視的屬性
    watch(
      ()=>{return student.age},
      (nval,oval)=>{console.log(nval, oval)}
    )

    // 如果監(jiān)視的對象屬性，也是一個對象，默認不開啟深度監(jiān)視，需要手動開啟。
    watch(
      ()=>{return student.car},
      (nval,oval)=>{console.log(nval,oval)},
      {deep:true}
    )

    watch(
      ()=>{return student.plane.driver},
      (nval,oval)=>{console.log(nval,oval)},
      {deep:true}
    )

    // watchEffect()監(jiān)視器，不需要明確的去監(jiān)視誰，誰在回調函數(shù)里面用到了，就監(jiān)視誰。
    // 注意：該回調函數(shù)一開始會執(zhí)行一次。
    watchEffect(()=>{
      let m = money.value
      let n = student.name
      console.log(111);
    })

    return {
      money,
      student
    };
  },
};
</script>