一、vue2与vue3的区别
1、vue2创建实例
导入vue2
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
创建vue2实例
new Vue({
// el:'#app' ,
data:{
name:"vue2",
age:8
}
}).$mount('#app')
2、vue3
导入vue3
<script src="https://unpkg.com/vue@next"></script>
vue3创建一个实例：vue3里面的vue是一个对象，通过对象的createApp方法，创建一个vue实例
vue3中取消了el选项
vue3中，无论是组件还是vue实例，data选项必须的一个方法，由方法返回对象
Vue.createApp({
data() {
return {
name:'vue3',
age :2
}
},
}).mount('#app')
二、vue2和vue3响应式的区别
<div id="app">
<div> 学生信息：{{student}} </div>
<button @click="student.name='李四'">修改姓名</button>
<button @click="student.age++">修改年龄</button>
<button @click="addSex">增加性别</button>
<button @click="delName">删除姓名</button>
<div>食物：{{foods}}</div>
<button @click="addFood">添加食物</button>
<button @click="delFood">删除食物</button>
</div>
1、vue2的响应式
<script>
new Vue({
el:"#app",
data:{
student:{
name:"张三",
age:39},
foods: ['苹果', '香蕉', '橘子', '芒果', '西瓜']
},
methods:{
addSex(){
this.$set(this.student,'sex','男')}
}，
addFood(){
this.$set(this.foods,5,'樱桃')}
}，
delName(){
this.$delete(this.student,'name')
},
delFood(){
this.$delete(this.foods,3)
}
},
}）
2、vue3的响应式
<script>
Vue.createApp({
data() {
return {
student: {
name: '张三',
age: 23
},
foods: ['苹果', '香蕉', '橘子', '芒果', '西瓜']
}
},
methods: {
addSex() {
this.student.sex = '男'
},
delName() {
delete this.student.name
},
addFood() {
this.foods[3] = '樱桃'
},
delFood() {
this.foods[4] = ''
}
},
}).mount('#app')
</script>
三、vue2和vue3的响应式原理区别
<div id="app">
<div id="name"></div>
<div id="age"></div>
</div>
1、vue2的响应式原理
<script>
let obj3 = {
name: '李四',
age: 20
}
document.querySelector('#name').innerHTML = obj3.name
document.querySelector('#age').innerHTML = obj3.age
//定义一个obj2对象，作为obj的代理对象
let obj2={}
//通过Object.defineProperty方法，给obj2,添加属性
Object.defineProperty(obj2,'name',{
get(){ return obj.name },//读取属性的值，调用get方法
set(val){ obj.name=val
document.querySelector('#name').innerHTML = obj3.name
}//设置属性的值，调用set方法
})
</script>
vue2在实例化时，会将data里面的所有数据采用Object.defineProperty进行处理，实现响应式，但是之后添加的数据，由于没有采用Object.defineProperty方法进行处理，所以不具备响应式。$set方法，内部就是对单个属性重新采用Object.defineProperty进行处理，从而具备响应式。
2、vue3的响应式原理
<div id="app">
<div id="name2">{{name}}</div>
<div id="age2">{{age}}</div>
</div>
<script>
let obj3 = {
name: '李四',
age: 20
}
document.querySelector('#name2').innerHTML = obj3.name
document.querySelector('#age2').innerHTML = obj3.age
//通过proxy创建一个代理对象
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)
}
})
Vue.createApp({
}).mount('#app')
</script>
