一、初始Vue3
1、导入Vue3
<script src="https://unpkg.com/vue@next"></script>
2、创建vue实例
Vue3和Vue2创建vue实例的区别：
① 在Vue3里面Vue是一个对象，通过该对象的createApp()方法，创建一个Vue实例。在Vue2里面的Vue是一个构造函数，通过该构造函数创建一个Vue实例。
② Vue3中取消了el选项，只能通过mount方法指定挂载的容器，不用通过el选项指定。Vue2可以通过el选项指定一个挂载的容器，也可以通过$mount()方法指定挂载的容器。
③ Vue3中，无论是组件还是vue实例，data选项都必须是一个方法，由方法返回对象。而在Vue2中，data选项可以是对象，也可以是方法返回一个对象。
<div id="app">
<div>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
</div>
</div>
// vue2创建一个vue实例
// 在vue2里面的Vue是一个构造函数，通过该构造函数创建一个Vue实例
// vue2可以通过el选项指定一个挂载的容器，也可以通过$mount()方法指定挂载的容器
/* new Vue({
// el:'#app',
// 在vue2中，data选项可以是对象，也可以是方法返回一个对象
data:{
name:'Vue2',
age:'6'
}
}).$mount('#app') */
// vue3创建一个vue实例
// 在vue3里面Vue是一个对象，通过该对象的createApp()方法，创建一个Vue实例
Vue.createApp({
// 注意：这个配置对象里面除了不能写el选项，之前怎么写，现在还可以怎么写
// 注意：vue3中，无论是组件和是vue实例，data选项都必须是一个方法，由方法返回对象。
data(){
return {
name:'Vue3',
age:'2'
}
}
}).mount('#app')
二、Vue2和Vue3的响应式
1、Vue2的响应式
在Vue2中，Vue实例在初始化的时候，会将obj对象身上的所有数据做响应式处理。所谓响应式，指的是数据发生变化后，页面自动更新。
Vue2的响应式：不能直接给对象添加属性、删除对象的属性，不能直接操作数组的下标。 但是，Vue2同时也提供了解决这些问题的方案：可以通过Vue实例的$set方法，更新指定的对象属性或数组成员；$delete方法，删除指定对象的属性或数组的成员。
<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>
<div>食物：{{foods}}</div>
<button @click="addFood">添加食物</button>
<button @click="delFood">删除帝王蟹</button>
</div>
// vue2的响应式
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方式删除对象的属性后，不具备响应式
// 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()
//推荐使用$set方法根据下标添加数组元素，确保新添加的元素同样具备响应式
this.$set(this.foods,5,'佛跳墙')
},
//删除食物
delFood(){
// this.foods.splice(3,1)
//直接根据下标删除数组元素，不具备响应式
// this.foods[3] = null
//使用$delete方法，删除数组中指定位置的元素，继续具备响应式
this.$delete(this.foods,3)
}
},
})
2、Vue3的响应式
Vue3修复了Vue2中响应式的所有缺陷。在Vue3中，直接给对象添加属性、直接删除对象的属性、根据下标操作数组，都依然具备响应式。
<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>
<div>食物：{{foods}}</div>
<button @click="addFood">添加食物</button>
<button @click="delFood">删除帝王蟹</button>
</div>
// vue3的响应式
Vue.createApp({
data() {
return {
student:{
name:'张三',
age:20
},
foods:['鱼翅','松茸','鱼子酱','帝王蟹','熊掌']
}
},
methods: {
addSex(){
// 在Vue3中，直接给对象添加属性，新的属性依然具备响应式
this.student.sex = '男'
},
delName(){
// 在Vue3中，直接删除对象的属性，依然具备响应式
delete this.student.name
},
addFood(){
// 在Vue3中，根据下标操作数组，依然具备响应式
this.foods[5] = '佛跳墙'
},
delFood(){
delete this.foods[3]
}
},
}).mount("#app")
三、Vue2和Vue3的响应式原理
1、Vue2的响应式原理
Vue2在实例化时，会将data里面的所有数据采用 Object.defineProperty 进行处理，从而实现响应式功能。但是你之后往data里面添加的数据，由于没有采用 Object.defineProperty 进行处理，所以不具备响应式。$set()方法，内部就是对单个属性重新采用 Object.defineProperty 进行处理，从而具备响应式。
<div>
<h2 id="name"></h2>
<h2 id="age"></h2>
<h2 id="sex"></h2>
</div>
// vue2的响应式原理
//源对象
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
}
})
2、Vue3的响应式原理
通过new Proxy(源对象,{...})的方式，创建代理对象。通过Proxy（代理） 拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。对于vue3而言，底层使用reflect会比较健壮，不容易出现有个错误就导致程序阻塞。
vue3 使用proxy代理对象和Reflect反射对象组合实现响应式数据，在性能方面，比vue2更加有优势。
// new 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)
}
})
四、Vue3新推出的组合式API
Vue3中，无论是Vue实例，还是组件，data选项都必须是一个方法。我们之前习惯将所有的数据放在data选项中定义，所有的方法放在methods选项中定义，所有的计算属性放在computed选项中定义，所有的侦听器放在watch选项中定义。这样就会导致一个业务的代码会拆分到多个结构中去写，如果一个页面中要操作很多个业务，代码后期维护成本会很高。所以，Vue3引入了组合式API，简化之前繁琐的过程，将相同业务的代码靠在一起写。
组合式API(Composition API)：就是Vue推出的一些新的方法，这个方法在setup中使用。组合式api的作用是将原来分散开来定义的数据、方法、计算属性、监听器等，组合起来定义一个完整的业务。
ref对象：在setup中，直接定义的数据是不具备响应式的。如果要使数据具备响应式，需要使用ref组合式API对数据进行包装，包装后返回的是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>
// 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'
}
//定义飞机相关数据
let planeName=ref('波音747')
let planePrice=ref('10Y')
//定义飞机相关方法
function updatePlane(){
planeName.value = 'B52轰炸机',
planePrice.value = '30Y'
}
return{
//返回汽车相关数据
carName,
carPrice,
updateCar,
//返回飞机相关数据
planeName,
planePrice,
updatePlane
}
},
// vue2中只能这样写代码，vue3也可以这样写
/* data() {
return {
carName:'保时捷',
carPrice:'100W',
planeName:'波音747',
planePrice:'10Y'
}
},
methods: {
updateCar(){
this.carName = '特斯拉'
this.carPrice = '80W'
},
updatePlane(){
this.planeName = 'B52轰炸机',
this.planePrice = '30Y'
}
}, */
}).mount('#app')
五、ref和reactive
ref 和 reactive 都是用于定义响应式数据。通常情况下，基本类型的数据，选择用ref定义；引用类型的数据，选择用reactive定义。
ref方法：返回的是ref对象，ref对象的value属性是一个代理对象(Proxy)。使用ref既可以定义基本类型数据，也可以定义引用类型数据。注意：修改ref对象的值，必须要先.value再.具体的属性。
reactive方法：直接返回一个代理对象(Proxy)。reactive只能定义引用类型数据。
<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>
// ref 和 reactive 用于定义响应式数据
let {ref,reactive} = Vue
Vue.createApp({
// 所有的组合式api，要在setup方法里面使用
setup() {
// 使用ref定义基本类型数据
let name = ref('张三')
let updateName = ()=>{
// 修改值时，必须要点value
name.value = '李四'
}
// 使用ref定义引用类型数据
let car = ref({
name:'奔驰',
price:30
})
let updateCar = ()=>{
// 修改值时，必须要点value
car.value.name = '奥迪'
car.value.price = 40
}
// 使用reactive定义引用类型数据
// 注意：reactive只能定义引用类型数据
let plane = reactive({
name:'长城',
price:300
})
let updatePlane = ()=>{
// Proxy对象，不需要先点value
plane.name = '东方'
plane.price = 400
}
//setup方法，返回出去的对象里面的成员，可以在模板中使用
return{
name,
updateName,
car,
updateCar,
plane,
updatePlane
}
}
}).mount('#app')
