一、vue2與vue3的區(qū)別
1挽铁、vue2創(chuàng)建實(shí)例
導(dǎo)入vue2
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.common.dev.js"></script>
創(chuàng)建vue2實(shí)例
new Vue({
// el:'#app' ,
data:{
name:"vue2",
age:8
}
}).$mount('#app')
2袋倔、vue3
導(dǎo)入vue3
<script src="https://unpkg.com/vue@next"></script>
vue3創(chuàng)建一個(gè)實(shí)例:vue3里面的vue是一個(gè)對(duì)象坦辟,通過(guò)對(duì)象的createApp方法鳄橘,創(chuàng)建一個(gè)vue實(shí)例
vue3中取消了el選項(xiàng)
vue3中声离,無(wú)論是組件還是vue實(shí)例,data選項(xiàng)必須的一個(gè)方法瘫怜,由方法返回對(duì)象
Vue.createApp({
data() {
return {
name:'vue3',
age :2
}
},
}).mount('#app')
二术徊、vue2和vue3響應(yīng)式的區(qū)別
<div id="app">
<div> 學(xué)生信息:{{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的響應(yīng)式
<script>
new Vue({
el:"#app",
data:{
student:{
name:"張三",
age:39},
foods: ['蘋(píng)果', '香蕉', '橘子', '芒果', '西瓜']
},
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的響應(yīng)式
<script>
Vue.createApp({
data() {
return {
student: {
name: '張三',
age: 23
},
foods: ['蘋(píng)果', '香蕉', '橘子', '芒果', '西瓜']
}
},
methods: {
addSex() {
this.student.sex = '男'
},
delName() {
delete this.student.name
},
addFood() {
this.foods[3] = '櫻桃'
},
delFood() {
this.foods[4] = ''
}
},
}).mount('#app')
</script>
三暗挑、vue2和vue3的響應(yīng)式原理區(qū)別
<div id="app">
<div id="name"></div>
<div id="age"></div>
</div>
1笋除、vue2的響應(yīng)式原理
<script>
let obj3 = {
name: '李四',
age: 20
}
document.querySelector('#name').innerHTML = obj3.name
document.querySelector('#age').innerHTML = obj3.age
//定義一個(gè)obj2對(duì)象,作為obj的代理對(duì)象
let obj2={}
//通過(guò)Object.defineProperty方法炸裆,給obj2,添加屬性
Object.defineProperty(obj2,'name',{
get(){ return obj.name },//讀取屬性的值垃它,調(diào)用get方法
set(val){ obj.name=val
document.querySelector('#name').innerHTML = obj3.name
}//設(shè)置屬性的值,調(diào)用set方法
})
</script>
vue2在實(shí)例化時(shí)烹看,會(huì)將data里面的所有數(shù)據(jù)采用Object.defineProperty進(jìn)行處理国拇,實(shí)現(xiàn)響應(yīng)式,但是之后添加的數(shù)據(jù)惯殊,由于沒(méi)有采用Object.defineProperty方法進(jìn)行處理酱吝,所以不具備響應(yīng)式。$set方法靠胜,內(nèi)部就是對(duì)單個(gè)屬性重新采用Object.defineProperty進(jìn)行處理掉瞳,從而具備響應(yīng)式。
2浪漠、vue3的響應(yīng)式原理
<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
//通過(guò)proxy創(chuàng)建一個(gè)代理對(duì)象
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>