vue3官网：https://v3.cn.vuejs.org/guide/introduction.html
1. 初始Vue3
导入vue3
<script src="https://unpkg.com/vue@next"></script>
vue3创建一个vue实例
在vue3里面Vue是一个对象，通过该对象的createApp()方法，创建一个Vue实例
Vue.createApp({
// 注意：vue3中，取消了el选项
// el:'#app',
// 注意：vue3中，无论是组件和是vue实例，data选项都必须是一个方法，由方法返回对象。
data(){
return {
name:'Vue3',
age:'2'
}
}
}).mount('#app')
在vue2里面的Vue是一个构造函数，通过该构造函数创建一个Vue实例
new Vue({
// el:'#app',
// 在vue2中，data选项可以是对象，也可以是方法返回一个对象
data:{
name:'Vue2',
age:'6'
}
}).$mount('#app')
在vue2可以通过el选项指定一个挂载的容器，也可以通过$mount()方法指定挂载的容器
在vue3中，创建完一个组件实例，我们需要调用mount()方法将组件实例挂载到页面中
2. Vue2和Vue3的响应式
在Vue2中，Vue实例在初始化的时候，会将obj对象身上的所有数据做响应式处理。所谓响应式，指的是数据发生变化后，页面自动更新。
Vue2的响应式：不能直接给对象添加属性，删除对象的属性，不能直接操作数组的下标，但是，Vue2同时也提供了解决这些问题的方案。
<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)
}
},
})
vue3修复了vue2中响应式的所有缺陷。在Vue3中，直接给对象添加属性、直接删除对象的属性、根据下标操作数组，都依然具备响应式。
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的响应式原理
Vue2在实例化时，会将data里面的所有数据采用 Object.defineProperty 进行处理，从而实现响应式功能。但是你之后往data里面添加的数据，由于没有采用 Object.defineProperty 进行处理，所以不具备响应式。$set()方法，内部就是对单个属性重新采用 Object.defineProperty 进行处理，从而具备响应式。
<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 = value
document.getElementById('name').innerText = obj.name
}
})
// 给obj2定义age属性
Object.defineProperty(obj2,'age',{
get(){
return obj.age
},
set(value){
obj.age = value
document.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] = value
if(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
什么是组合式API(Composition API)，就是Vue推出的一些新的方法，这个方法在setup中使用
setup方法是所有组合式API的入口
Vue3中，无论是Vue实例，还是组件，data选项都必须是一个方法。
我们之前习惯将所有的数据放在data选项中定义，所有的方法放在methods选项中定义，
所有的计算属性放在computed选项中定义，所有的侦听器放在watch选项中定义，
这样就会导致一个业务的代码会拆分到多个结构中去写，如果一个页面中要操作很多个业务，代码后期维护成本会很高。
所以，Vue3引入了组合式API，简化之前繁琐的过程，将相同业务的代码靠在一起写。
// 组合式api的作用是：将原来分散开来定义的数据，方法，计算属性，监听器，组合起来定义一个完整的业务。
// ref用于定义响应式数据
let {ref} = Vue
Vue.createApp({
// setup是组合式api的舞台，所有的组合式api都要在setup里面使用
setup() {
// 在setup中，直接定义的数据是不具备响应式的，
// 如果要使数据具备响应式，需要使用ref组合式API对数据进行包装，包装后返回的是ref对象
//定义汽车相关数据
// 使用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'
}
//手表
let watchName=ref('劳力士')
let watchPrice=ref('10W')
function updateWacth(){
watchName.value = '欧米伽',
watchPrice.value = '4W'
}
//手机
let phoneName=ref('iphone13')
let phonePrice=ref('5999')
function updatePhone(){
phoneName.value = '华为',
phonePrice.value = '6999'
}
return{
//返回汽车相关数据
carName,
carPrice,
updateCar,
//返回飞机相关数据
planeName,
planePrice,
updatePlane,
//返回手表相关数据
watchName,
watchPrice,
updateWacth,
//返回手机相关数据
phoneName,
phonePrice,
updatePhone
}
},
}).mount('#app')
5. ref和reactive
ref 和 reactive 都是用于定义响应式数据。通常情况下，基本类型的数据，选择用ref定义；引用类型的数据，选择用reactive定义。
ref方法：返回的是ref对象，ref对象的value属性是一个代理对象(Proxy)。使用ref既可以定义基本类型数据，也可以定义引用类型数据。注意：修改ref对象的值，必须要先.value再.具体的属性。
reactive方法：直接返回一个代理对象(Proxy)。reactive只能定义引用类型数据.
<div id="app">
<h4>姓名：{{name}}</h4>
<h4>学生：{{stu}}</h4>
<button @click="updateName">修改姓名</button>
<button @click="updateStu">修改学生</button>
</div>
let {ref,reactive} = Vue
Vue.createApp({
setup() {
let name = ref('张三')
let updateName = ()=>{
name.value = '张杰'
}
/* let stu = ref({
name:'李四',
age:20
})
let updateStu = ()=>{
// 注意：修改ref对象的值，每次都要先点value
stu.value.name = '李明'
stu.value.age = 30
} */
// reactive组合式API方法，根据源对象返回一个代理对象(Proxy对象)
let stu = reactive({
name:'李四',
age:20
})
let updateStu = ()=>{
// Proxy对象，不需要先点value
stu.name = '李明'
stu.age = 30
}
return {
name,
updateName,
stu,
updateStu
}
}
}).mount('#app')
