Vue3官網(wǎng)

1.初識Vue3

(1) 導入vue3

<script src="https://unpkg.com/vue@next"></script>

(2) 創(chuàng)建vue實例

(2.1) vue2創(chuàng)建一個vue實例：

// 在vue2里面的Vue是一個構(gòu)造函數(shù)，通過該構(gòu)造函數(shù)創(chuàng)建一個Vue實例
new Vue({
    el:'#app',
    data:{
       name:'Vue2',
       age:'6'
    }
}).$mount('#app') */
// vue2可以通過el選項指定一個掛載的容器，也可以通過$mount()方法指定掛載的容器

(2.2) vue3創(chuàng)建一個vue實例：

// 在vue3里面Vue是一個對象，通過該對象的createApp()方法，創(chuàng)建一個Vue實例
Vue.createApp({
   // 注意：vue3中，取消了el選項
   // 注意：vue3中，無論是組件還是vue實例，data選項都必須是一個方法，由方法返回對象。
   data() {
       return {
         ame:'Vue3',
         age:2
      }
   },
}).mount('#app')

3.頁面中使用

<div id="app">
    <div>
        <p>name:{{name}}</p>
        <p>age:{{age}}</p>
    </div>
</div>

2.Vue2和Vue3的響應式

(1) vue2的響應式

<div id="app" v-cloak>
    <div>學生信息：{{student}}</div>
    <button @click="student.name+='!'">修改學生姓名</button>
    <button @click="student.age++">修改學生年齡</button>
    <button @click="addSex">添加性別</button>
    <button @click="delName">刪除姓名</button>
    <hr>
    <div>食物：{{foods}}</div>
    <button @click="addFood">添加食物</button>
    <button @click="delFood">刪除帝王蟹</button>
</div>

new Vue({
     el:'#app',
     data:{
         student:{
             name:'張三',
             age:20
         },
         foods:['魚翅','魚子醬','松茸','帝王蟹']
     },
     methods: {
         addSex(){
             // 后添加的屬性是非響應式的
             // 可以通過這個方法this.$forceUpdate()強制頁面更新一次
             // this.student.sex='男'
             // this.$forceUpdate()
             // 推薦使用$set()方法給對象添加新的屬性，確保新添加的屬性同樣具備響應式
             this.$set(this.student,'sex','男')
             console.log(this.student);
         },
         delName(){
             // 直接使用delete方法刪除對象的屬性后，不具備響應式
             // delete this.student.name
             // 使用$delete，具備響應式
             this.$delete(this.student,'name')
         },
         addFood(){
             // 操作數(shù)組后同時要具有響應式，必須要使用下面的方法：
             // push pop unshift shift sort reserve splice
             // this.foods.push('佛跳墻')
             // this.foods[4] = '佛跳墻'
             // this.$forceUpdate()
             // 推薦使用$set()方法根據(jù)下標添加數(shù)組元素，確保新添加的元素同樣具備響應式
             this.$set(this.foods,4,'佛跳墻')
         },
         delFood(){
             // this.foods.splice(3,1)
             // 直接根據(jù)下標刪除數(shù)組元素，不具備響應式
             // this.foods[3] = null
             // 使用$delete,具備響應式
             this.$delete(this.foods,3)
         }
     },
})

(2) vue3的響應式

vue3修復了vue2中響應式的所有缺陷。
在vue3中，直接給對象添加屬性、直接刪除對象的屬性、根據(jù)下標操作數(shù)組，都依然具備響應式。

Vue.createApp({
    data() {
        return {
            student: {
                name: '張三',
                age: 20
            },
            foods: ['魚翅', '魚子醬', '松茸', '帝王蟹']
        }
    },
    methods: {
        addSex(){
            this.student.sex='男'
        },
        delName(){
            delete this.student.name
        },
        addFood(){
            this.foods[4] ='佛跳墻'
        },
        delFood(){
            this.foods[3] = null
        }
    },
}).mount('#app')

3.引出Vue3新推出的組合式API

(1) vue2中只能這樣寫代碼，vue3也可以這樣寫

<div id="app">
    <div>
        <p>{{carName}}--{{carPrice}}</p>
        <button @click="updateCar">修改汽車信息</button>
    </div>
    <div>
        <p>{{planeName}}--{{planePrice}}</p>
        <button @click="updatePlane">修改飛機信息</button>
    </div>
    <div>
        <p>{{watchName}}--{{watchPrice}}</p>
        <button @click="updateWatch">修改手表信息</button>
    </div>
    <div>
        <p>{{phoneName}}--{{phonePrice}}</p>
        <button @click="updatePhone">修改手機信息</button>
    </div>
</div>

Vue.createApp({
    data() {
        return {
            carName:'保時捷',
            carPrice:'100w',
            planeName:'播音747',
            planePrice:'10y',
            watchName:'勞力士',
            watchPrice:'10w',
            phoneName:'iphone13',
            phonePrice:'5999'
        }
    },
    methods: {
        updateCar(){
            this.carName = '布加迪威龍'
            this.carPrice = '200w'
        },
        updatePlane(){
            this.planeName = 'B52轟炸機'
            this.planePrice = '30y'
        },
        updateWatch(){
            this.watchName = '歐米茄'
            this.watchPrice = '4w'
        },
        updatePhone(){
            this.phoneName = '華為'
            this.phonePrice = '6999'
        }
    },
}).mount('#app')

(2) vue3引入了全新的功能，組合式API，所有的組合式API都要在setup里面使用

Vue3中，無論是Vue實例，還是組件，data選項都必須是一個方法。
我們之前習慣將所有的數(shù)據(jù)放在data選項中定義，所有的方法放在methods選項中定義，所有的計算屬性放在computed選項中定義，所有的偵聽器放在watch選項中定義。這樣就會導致一個業(yè)務(wù)的代碼會拆分到多個結(jié)構(gòu)中去寫，如果一個頁面中要操作很多個業(yè)務(wù)，代碼后期維護成本會很高。
所以，Vue3引入了組合式API，簡化之前繁瑣的過程，將相同業(yè)務(wù)的代碼靠在一起寫。

組合式api的作用是：將原來分散開來定義的數(shù)據(jù)、方法、計算屬性、監(jiān)聽器等，組合起來定義一個完整的業(yè)務(wù)。

組合式API(Composition API)：Vue推出的一些新的方法，這個方法在setup中使用。
ref對象：在setup中，直接定義的數(shù)據(jù)是不具備響應式的。ref用于定義響應式數(shù)據(jù)，使用ref組合式API對數(shù)據(jù)進行包裝，包裝后返回的是ref對象。ref對象的value屬性保存的是值。

<div id="app">
    <div>
        <p>{{carName}}--{{carPrice}}</p>
        <button @click="updateCar">修改汽車信息</button>
    </div>
    <div>
        <p>{{planeName}}--{{planePrice}}</p>
        <button @click="updatePlane">修改飛機信息</button>
    </div>
    <div>
        <p>{{watchName}}--{{watchPrice}}</p>
        <button @click="updateWatch">修改手表信息</button>
    </div>
    <div>
        <p>{{phoneName}}--{{phonePrice}}</p>
        <button @click="updatePhone">修改手機信息</button>
    </div>
</div>

// ref用于定義響應式數(shù)據(jù)
let { ref } = Vue

Vue.createApp({
    // setup是組合式API的舞臺，所有的組合式API都要在setup里面使用
    setup() {
        // 定義汽車相關(guān)數(shù)據(jù)
        // 使用ref()方法，定義一個響應式對象
        let carName = ref('保時捷')
        let carPrice = ref('100w')
        // 定義汽車相關(guān)方法
        function updateCar() {
            // 修改對象的值，要通過value屬性
            carName.value = '布加迪威龍'
            carPrice.value = '200w'
            console.log(carName,carPrice);
        }

        // 定義飛機相關(guān)數(shù)據(jù)
        let planeName = ref('播音747')
        let planePrice = ref('10y')
        function updatePlane() {
            planeName.value = 'B52轟炸機'
            planePrice.value = '30y'
        }

        // 手表
        let watchName = ref('勞力士')
        let watchPrice =ref( '10w')
        function updateWatch() {
            watchName.value = '歐米茄'
            watchPrice.value = '4w'
        }

        // 手機
        let phoneName = ref('iphone13')
        let phonePrice =ref( '5999')
        function updatePhone() {
            phoneName.value = '華為'
            phonePrice.value= '6999'
        }
        return {
            // 返回汽車相關(guān)數(shù)據(jù)
            carName,
            carPrice, 
            updateCar,
            // 返回飛機相關(guān)數(shù)據(jù)
            planeName,
            planePrice,
            updatePlane,
            // 返回手表相關(guān)數(shù)據(jù)
            watchName,
            watchPrice,
            updateWatch,
            // 返回手機相關(guān)數(shù)據(jù)
            phoneName,
            phonePrice,
            updatePhone
        }
    }
}).mount('#app')

4.ref( )和reactive( )

所有的組合式API，要在setup方法里面使用；setup方法，返回出去的對象里面的成員，可以在模板中使用。
ref 和 reactive 用于定義響應式數(shù)據(jù)。
通常情況下，基本類型的數(shù)據(jù)，選擇用ref定義；引用類型的數(shù)據(jù)，選擇用reactive定義。

ref方法：返回的是ref對象，ref對象的value屬性是一個代理對象(Proxy)。使用ref既可以定義基本類型數(shù)據(jù)，也可以定義引用類型數(shù)據(jù)。注意：修改值時，必須要先 點value再 點具體的屬性 = 值
reactive方法：直接返回一個代理對象(Proxy)。reactive只能定義引用類型數(shù)據(jù)。

<div id="app">
    <ul>
        <li>姓名：{{name}}</li>
        <li><button @click="updateName">修改姓名</button></li>
    </ul>
    <ul>
        <li>車名：{{car.name}}</li>
        <li>車價：{{car.price}}</li>
        <li><button @click="updateCar">修改汽車</button></li>
    </ul>
    <ul>
        <li>飛機名：{{plane.name}}</li>
        <li>飛機價：{{plane.price}}</li>
        <li><button @click="updatePlane">修改飛機</button></li>
    </ul>
</div>

let { ref, reactive } = Vue
Vue.createApp({
    setup() {
        // 使用ref定義基本類型數(shù)據(jù)
        let name = ref('張三')
        let updateName = () => {
            // 修改值時，必須要先 點value
            name.value = '李四'
        }
        // 使用ref定義引用類型數(shù)據(jù)
        let car = ref({
            name: '奔馳',
            price: 30
        })
        let updateCar = () => {
            // 修改值時，必須要先 點value
            car.value.name = '奧迪'
            car.value.price = 40
        }
        // 使用reactive定義引用類型數(shù)據(jù)
        // 注意：reactive只能定義引用類型數(shù)據(jù)
        // 定義引用類型優(yōu)先選擇reactive，定義值類型選擇ref
        let plane = reactive({
            name: '長城',
            price: 300
        })
        let updatePlane = () => {
            plane.name = '東風'
            plane.price = 400
        }
        console.log(car);
        console.log(plane);

        return {
            name,
            updateName,
            car,
            updateCar,
            plane,
            updatePlane
        }
    }
}).mount('#app')

作者：Jinxchan
鏈接：http://www.itdecent.cn/p/ffeea4834b45