大家好,我是小编阿贤。欢迎各位大神关注《全栈技术圈》,让技术更加简单易懂。
1. vue2和vue3实例区别
1.1 创建一个vue2实例
在vue2里面的Vue是一个构造函数,通过该构造函数创建一个Vue实例,data选项可以是对象,也可以是方法返回一个对象。可以通过el选项指定一个挂载的容器,也可以通过$mount()方法指定挂载的容器。
new Vue({
el: '#app',
data: {
name: 'Vue2',
age: '6'
}
}).$mount('#app')
1.2 创建一个vue3实例
在vue3里面Vue是一个对象,通过该对象的createApp()方法,创建一个Vue实例。vue3中,取消了el选项。vue3中,无论是组件和是vue实例,data选项都必须是一个方法,由方法返回对象。
Vue.createApp({
//el: '#app',
data() {
return {
name: 'Vue3',
age: '2'
}
}
}).mount('#app')
2.Vue2和Vue3的响应式区别
2.1 vue2的响应式
在addSex方法中后添加的属性是非响应式的。在delName方法中直接使用delete方式删除对象的属性后,不具备响应式。在addFood方法中操作数组后同时要具有响应式。推荐使用$set方法根据下标添加数组元素,确保新添加的元素同样具备响应式。在delFood方法中直接根据下标删除数组元素,不具备响应式。
new Vue({
el:'#app',
data:{
student:{
name:'张三',
age:20
},
foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌']
},
methods: {
addSex(){ //添加性别
// this.student.sex='男'
//可以通过$forceUpdate()强制页面更新一次
// this.$forceUpdate()
//推荐使用$set方法给对象添加新的属性,确保新添加的属性同样具备响应式
this.$set(this.student,'sex','男')
},
delName(){ //删除姓名
// 不具备响应式
// delete this.student.name
//使用$delete方法,删除对象的属性后,继续具备响应式
this.$delete(this.student,'name')
},
addFood(){ //添加食物
// 具有响应式,必须要使用下面的方法:
// push pop unshift shift sort reverse splice
// this.foods.push('佛跳墙')
// this.foods[5] = '佛跳墙'
// this.$forceUpdate()
this.$set(this.foods,5,'佛跳墙')
},
//删除食物
delFood(){
// this.foods.splice(3,1)
//不具备响应式
// this.foods[3] = null
//使用$delete方法,删除数组中指定位置的元素,继续具备响应式
this.$delete(this.foods,3)
}
}
})
2.2 vue3修复了vue2中响应式的所有缺陷
vue3后续新增属性值具有响应式,delete自己删除属性也具有响应式。
Vue.createApp({
data() {
return {
student:{
name:'张三',
age:20
},
foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌']
}
},
methods: {
addSex(){
this.student.sex = '男'
},
delName(){
delete this.student.name
},
addFood(){
this.foods[5] = '佛跳墙'
},
delFood(){
delete this.foods[3]
}
}
}).mount("#app")
3 Vue2和Vue3的响应式原理
3.1 vue2的响应式原理
vue2在实例化时,会将data里面的所有数据采用 Object.defineProperty 进行处理,实现实现响应式功能。但是你之后往data里面添加的数据,由于没有采用 Object.defineProperty 进行处理,所以不具备响应式。$set()方法,内部就是对单个属性重新采用 Object.defineProperty 进行处理,从而具备响应式。
//源对象
let obj = {
name:'张三',
age:20,
sex:'男'
};
document.querySelector('#name').innerHTML = obj.name;
document.querySelector('#age').innerHTML = obj.age;
document.querySelector('#sex').innerHTML = obj.sex;
//定义一个obj2对象,作为obj的代理对象
let obj2 = {};
//通过Object.defineProperty方法,给obj2添加属性
Object.defineProperty(obj2, 'name', {
//读取属性的值,调用get方法
get(){
return obj.name;
},
//设置属性的值,调用set方法
set(val){
obj.name = val;
document.querySelector('#name').innerHTML = obj.name;
}
});
Object.defineProperty(obj2, 'age', {
//读取属性的值,调用get方法
get(){
return obj.age;
},
//设置属性的值,调用set方法
set(val){
obj.age = val;
document.querySelector('#age').innerHTML = obj.age;
}
});
Object.defineProperty(obj2,'sex',{
//读取属性的值,调用get方法
get(){
return obj.sex
},
//设置属性的值,调用set方法
set(val){
obj.sex = val
document.querySelector('#sex').innerHTML = obj.sex
}
});
3.2 vue3的响应式原理
使用new Proxy()创建一个代理对象,通过放射对象从指定的对象身上发射出指定的属性值。
// 源对象
let obj3 = {
name:'张三',
age:20,
sex:'男'
}
document.querySelector('#name2').innerHTML = obj3.name
document.querySelector('#age2').innerHTML = obj3.age
document.querySelector('#sex2').innerHTML = obj3.sex
let obj4 = new Proxy(obj3, {
//获取属性
get(target, property){
// 直接返回源对象身上的指定的属性值
// return target[property];
// 通过放射对象从指定的对象身上发射出指定的属性值
return Reflect.get(target, property);
},
//设置属性
set(target, property, value){
// target[property] = value;
Reflect.set(target,property,value);
document.querySelector(`#${property}2`).innerHTML = Reflect.get(target,property);
},
//删除属性
deleteProperty(target, property){
// return delete target[property];
document.querySelector(`#${property}2`).remove();
return Reflect.deleteProperty(target,property);
}
});
4 Vue3新推出的组合式API
4.1 vue2中只能这样写代码,vue3也可以这样写
data() {
return {
carName:'保时捷',
carPrice:'100W'
}
},
methods: {
updateCar(){
this.carName = '特斯拉'
this.carPrice = '80W'
}
}
4.2 vue3引入了全新的功能,组合式API
组合式api的作用是:将原来分散开来定义的数据,方法,计算属性,监听器,组合起来定义一个完整的业务。
// ref用于定义响应式数据
let {ref} = Vue
Vue.createApp({
// setup是组合式api的舞台,所有的组合式api都要在setup里面使用
setup() {
//定义汽车相关数据
// 使用ref()方法,定义一个响应式对象
let carName=ref('保时捷')
let carPrice=ref('100W')
//定义汽车相关方法
function updateCar(){
//修改对象的值,要通过value属性
carName.value = '特斯拉'
carPrice.value = '80W'
}
return{
//返回汽车相关数据
carName,
carPrice,
updateCar,
}
})
})
总结:
Vue2升级Vue3带来更快的改动主要有两方面
1、vue3重新审视了 vdom,更改了自身对于 vdom的对比算法。vdom从之前的每次更新,都进行一次完整遍历对比,改为了切分区块树,来进行动态内容更新。也就是只更新 vdom的绑定了动态数据的部分,把速度提高了6倍;
2、 把 definePerproty改为了 proxy,对于 JavaScript引擎更加友好,响应更加高效。
本篇文件先写到这后续我们在深入Vue3升级改动。欢迎各位大神关注《全栈技术圈》,让技术更加简单易懂。
关注全栈技术圈,全面提升技术。
本作品系原创。禁止转载,如需转载请通过简信或评论联系作者。
最后编辑于:2024-10-27 15:58:36
© 著作权归作者所有,转载或内容合作请联系作者
喜欢的朋友记得点赞、收藏、关注哦!!!