Vue3启程
关键字：创建vue实例、响应式、响应式原理、组合式API
1. 初始Vue3
Vue2存在一些缺陷，Vue3解决了这些缺陷，剔除了过滤器，保留了绝大部分的功能，可以说更加好用，更加丰富。
我们将Vue2和Vue3对比一下，就很直观了：
<div id="app"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="updateData">修改数据</button>
</div>
Vue2中--创建实例的方式
new Vue({//指定挂载容器// el:'#app',//定义属性data() {return {name:'张三',age:20}},//定义方法methods: {updateData(){this.name = '李四'this.age = 25}},
}).$mount('#app') //指定当前vue实例挂载的容器 Vue3中--创建实例的方式
// Vue3中--创建实例的方式
Vue.createApp({//注意：这个配置对象里面除了不能写el选项，之前怎么写，现在还可以怎么写//定义属性data() {return {name:'张三',age:20}},//定义方法methods: {updateData(){this.name = '李四'this.age = 25}},
}).mount('#app') //只能通过mount方法指定挂载的容器，不用通过el选项指定
2. Vue2和Vue3的响应式
<div id="app"><h2>学生：{{stu}}</h2><h2>食物：{{foods}}</h2><div><button @click="updateStuName">修改学生姓名</button><button @click="addStuSex">添加学生性别</button><button @click="delStuAge">删除学生年龄</button><button @click="updateFoods2">修改第二个食物</button></div>
</div>
2. Vue2和Vue3的响应式
<div id="app"><h2>学生：{{stu}}</h2><h2>食物：{{foods}}</h2><div><button @click="updateStuName">修改学生姓名</button><button @click="addStuSex">添加学生性别</button><button @click="delStuAge">删除学生年龄</button><button @click="updateFoods2">修改第二个食物</button></div>
</div>
// Vue2
new Vue({data() {return {//学生对象stu:{name:'张三',age:20},//食物数组foods:['榴莲','葡萄','香蕉']}},methods: {updateStuName(){this.stu.name = '李四'},addStuSex(){// 直接给对象添加的属性，不具备响应式// this.stu.sex = '男'// 如果要给对象添加属性，并且添加的属性也要具备响应式，要使用$set方法// 方法的第一个参数是指定的对象，第二个参数是属性名，第三个参数是属性值。this.$set(this.stu,'sex','男')},delStuAge(){// 直接删除对象身上的属性，是不具备响应式的// delete this.stu.age// 如果要删除对象身上的属性，并且还要具备响应式，要使用$delete方法// 方法的第一个参数是指定的对象，第二个参数是属性名this.$delete(this.stu,'age')},updateFoods2(){// 直接根据索引修改数组元素，不具备响应式// this.foods[1] = '西瓜'// 操作数组中的元素，并且还要具备响应式，只能使用数组的以下方法：// push unshift pop shift splice reverse sort// this.foods.splice(1,1,'西瓜')// 如果就是想通过下标去操作数组，还要具备响应式，使用$set方法this.$set(this.foods,1,'西瓜')}},
}).$mount('#app')
// 总结Vue2的响应式：不能直接给对象添加属性，删除对象的属性，不能直接操作数组的下标，
// 但是，Vue2同时也提供了解决这些问题的方案。// Vue3
Vue.createApp({data() {return {//学生对象stu:{name:'张三',age:20},//食物数组foods:['榴莲','葡萄','香蕉']}},methods: {updateStuName(){this.stu.name = '李四'},addStuSex(){// 在Vue3中，直接给对象添加属性，新的属性依然具备响应式this.stu.sex = '男'},delStuAge(){// 在Vue3中，直接删除对象的属性，依然具备响应式delete this.stu.age},updateFoods2(){// 在Vue3中，根据下标操作数组，依然具备响应式this.foods[1] = '西瓜'}},
}).mount('#app')
// 总结Vue3的响应式：解决了再Vue2中的所有问题。
3. Vue2和Vue3的响应式原理
<h2 id="name"></h2>
<h2 id="age"></h2>
// Vue2的响应式原理：
// 这里的obj是源对象
let obj = {name:'张三',age:20
}
// 在页面中显示姓名和年龄
document.getElementById('name').innerText = obj.name
document.getElementById('age').innerText = obj.age
// 这里的obj2代理对象---由obj2代理obj
let obj2 = {}
// 给obj2定义name属性
Object.defineProperty(obj2,'name',{get(){return obj.name},set(value){obj.name = valuedocument.getElementById('name').innerText = obj.name}
})
// 给obj2定义age属性
Object.defineProperty(obj2,'age',{get(){return obj.age},set(value){obj.age = valuedocument.getElementById('age').innerText = obj.age}
}) // Vue3的响应式原理：
// 这里的obj是源对象
let obj = {name:'张三',age:20
}
// 在页面中显示姓名和年龄
document.getElementById('name').innerText = obj.name
document.getElementById('age').innerText = obj.age
// 这里的obj2代理对象---由obj2代理obj
// new Proxy(源对象,{...})的方式，创建代理对象
let obj2 = new Proxy(obj,{//读取属性，参数分别是：源对象，属性名get(target, property){// 直接根据源对象返回源对象身上的属性// return target[property]// 通过发射对象，发射输出源对象身上的属性return Reflect.get(target,property)},//设置属性，参数分别是：源对象，属性名，属性值set(target, property,value){// target[property] = valueif(Reflect.has(target,property)){Reflect.set(target, property,value)document.getElementById(`${property}`).innerText = value}},//删除属性，参数分别是：源对象，属性名deleteProperty(target, property){// delete target[property]Reflect.deleteProperty(target, property)}
})
4. 引出Vue3新推出的组合式API
这是很棒的一个功能，和另一个R框架有点像，让数据和方法在一起，方便维护。
<div id="app"><div><h2>学生信息</h2><!-- 注意：ref对象在模板只不需要.value的方式获取里面的值 --><h4>姓名：{{stuName}}</h4><h4>年龄：{{stuAge}}</h4><button @click="updateStu">修改学生信息</button></div><div><h2>汽车信息</h2><h4>车名：{{carName}}</h4><h4>车价：{{carPrice}}</h4><button @click="updateCar">修改汽车信息</button></div><div><h2>手机信息</h2><h4>名称：{{phoneName}}</h4><h4>颜色：{{phoneColor}}</h4><button @click="updatePhone">修改手机信息</button></div><div><h2>食物信息</h2><h4>名称：{{foodName}}</h4><h4>价格：{{foodPrice}}</h4><button @click="updateFood">修改食物信息</button></div>
</div>
什么是组合式API(Composition API)，就是Vue推出的一些新的方法，这个方法在setup中使用, 从Vue身上获取ref组合式API函数
let {ref} = Vue
Vue.createApp({// 注意：Vue2中，Vue实例的data选项可以是一个对象，也可以是一个方法，由方法返回一个对象// 但是，组件中data选项必须是一个方法。// Vue3中，无论是Vue实例，还是组件，data选项都必须是一个方法。// 我们之前习惯将所有的数据放在data选项中定义，所有的方法放在methods选项中定义，// 所有的计算属性放在computed选项中定义，所有的侦听器放在watch选项中定义，// 这样就会导致一个业务的代码会拆分到多个结构中去写，如果一个页面中要操作很多个业务，代码后期维护成本会很高。// 所以，Vue3引入了组合式API，简化之前繁琐的过程，将相同业务的代码靠在一起写。/* data: function () {return {//定义学生数据stuName: '张三',stuAge: '20',//汽车信息carName: '奔驰',carPrice: '50W',//手机信息phoneName: 'iphone',phoneColor: '白色',//食物信息foodName: '汉堡',foodPrice: '¥20'}}, methods: {//修改学生的方法updateStu(){this.stuName = '李四'this.stuAge = 30},//修改汽车的方法updateCar(){this.carName = '宝马'this.carPrice = '40W'},//修改手机的方法updatePhone(){this.phoneName = '华为'this.phoneColor = '蓝色'},updateFood(){this.foodName = '蛋糕'this.foodPrice = '¥30'}}, */// setup方法是所有组合式API的入口setup() {// 定义学生的信息// 在setup中，直接定义的数据是不具备响应式的，// 如果要使数据具备响应式，需要使用ref组合式API对数据进行包装，包装后返回的是ref对象let stuName = ref('张三')let stuAge = ref('20')let updateStu = () => {//ref对象的value属性保存的是值stuName.value = '李四'stuAge.value = 30}// 定义汽车的信息let carName = ref('奔驰')let carPrice = ref('50W')let updateCar = () => {carName.value = '宝马'carPrice.value = '40W'}// 定义手机的信息let phoneName = ref('iphone')let phoneColor = ref('白色')let updatePhone = () => {phoneName.value = '华为'phoneColor.value = '蓝色'}// 定义食物的信息let foodName = ref('汉堡')let foodPrice = ref('¥20')let updateFood = () => {foodName.value = '蛋糕'foodPrice.value = '¥30'}//返回模板中需要使用的数据return{stuName,stuAge,updateStu,carName,carPrice,updateCar,phoneName,phoneColor,updatePhone,foodName,foodPrice,updateFood}}
}).mount('#app')
© 著作权归作者所有,转载或内容合作请联系作者
喜欢的朋友记得点赞、收藏、关注哦！！！
