Vue.js：
渐进式JavaScript框架官方文档点我直达
Vue它是什么
是一套用于构建用户界面的渐进式框架，在使用Vue的时候，可以只使用Vue里面的一部分去配合其他前端框架一起开发，也可以整个项目从头到尾，从搭建项目，路由系统，全局的状态管理等全部使用Vue，非常灵活。Vue2学习资料可以看历史文章哦
一、初识Vue3
1.引入js文件，以开发版本来学习，下载到本地，首先引入Vue.js文件。
2.Vue3创建一个Vue实例与Vue2创建一个实例的区别，在Vue3里面Vue是一个对象，通过该对象的createApp()方法，创建一个Vue实例，注意：在Vue3中，取消了el选项，在Vue3中，无论论是组件和Vue实例，data选项都必须是一个方法，由方法返回对象。
初识Vue3
name:{{name}}
age:{{age}}
二、响应式
1.Vue3修复了Vue2中响应式的所有缺陷。什么是响应式？当数据变化，页面也会随之变化，例如Vue2的响应式：不能直接给对象添加属性，删除对象的属性，不能直接操作数组的下标，但是，Vue2同时也提供了解决这些问题的方案。
初识Vue2和Vue3的响应式
{{student}}
三、响应式原理
1.vue2在实例化时，会将data里面的所有数据采用Object.defineProperty进行处理，实现实现响应式功能。
2.但是你之后往data里面添加的数据，由于没有来用 object.defineProperty进行处理，所以不具备响应式。
3.$set()方法，内部就是对单个属性重新采用 0bject.defineProperty进行处理，从而具备响应式。
Vue2和Vue3的响应式原理
2.在Vue3中响应式，无论是代码量还是性能，Proxy更加有优势。
// Vue3的响应式原理：
// 这里的obj是源对象
let obj = {
name:'Vue3',
age:3
}
// 在页面中显示姓名和年龄
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){
// return delete target[property]
//官方说，用这个方式发射，性能更好，更快
Reflect.deleteProperty(target, property)
}
})
四、引出Vue3新推出的组合式API
Vue3引入了全新的功能，叫组合式api，它是什么，可以理解为Vue新推出的一些方法，作用是：讲原来分散开来定义的数据，方法，计算属性，监听器，组合起来定义一个完整的业务，统一在setup中使用，在setup中，直接定义的数据是不具备响应式的，如果要使数据具备响应式，需要使用ref组合式API对数据进行包装，包装后返回的是ref对象。
学生信息
姓名：{{stuName}}
年龄：{{stuAge}}
汽车信息
车名：{{carName}}
车价：{{carPrice}}
手机信息
名称：{{phoneName}}
颜色：{{phoneColor}}
食物信息
名称：{{foodName}}
价格：{{foodPrice}}
// 什么是组合式API(Composition API)，就是Vue推出的一些新的方法，这个方法在setup中使用
// 从Vue身上获取ref组合式API函数
let {ref} = Vue
Vue.createApp({
// 注意：Vue2中，Vue实例的data选项可以是一个对象，也可以是一个方法，由方法返回一个对象
// 但是，组件中data选项必须是一个方法。
// Vue3中，无论是Vue实例，还是组件，data选项都必须是一个方法。
// 我们之前习惯将所有的数据放在data选项中定义，所有的方法放在methods选项中定义，
// 所有的计算属性放在computed选项中定义，所有的侦听器放在watch选项中定义，
// 这样就会导致一个业务的代码会拆分到多个结构中去写，如果一个页面中要操作很多个业务，代码后期维护成本会很高。
// 所以，Vue3引入了组合式API，简化之前繁琐的过程，将相同业务的代码靠在一起写。
/* data: function () {
return {
//定义学生数据
stuName: '张三',
stuAge: '20',
//汽车信息
carName: '奔驰',
carPrice: '50W',
//手机信息
phoneName: 'iphone',
phoneColor: '白色',
//食物信息
foodName: '汉堡',
foodPrice: '¥20'
}
},
methods: {
//修改学生的方法
updateStu(){
this.stuName = '李四'
this.stuAge = 30
},
//修改汽车的方法
updateCar(){
this.carName = '宝马'
this.carPrice = '40W'
},
//修改手机的方法
updatePhone(){
this.phoneName = '华为'
this.phoneColor = '蓝色'
},
updateFood(){
this.foodName = '蛋糕'
this.foodPrice = '¥30'
}
}, */
// setup方法是所有组合式API的入口
setup() {
// 定义学生的信息
// 在setup中，直接定义的数据是不具备响应式的，
// 如果要使数据具备响应式，需要使用ref组合式API对数据进行包装，包装后返回的是ref对象
let stuName = ref('张三')
let stuAge = ref('20')
let updateStu = () => {
//ref对象的value属性保存的是值
stuName.value = '李四'
stuAge.value = 30
}
// 定义汽车的信息
let carName = ref('奔驰')
let carPrice = ref('50W')
let updateCar = () => {
carName.value = '宝马'
carPrice.value = '40W'
}
// 定义手机的信息
let phoneName = ref('iphone')
let phoneColor = ref('白色')
let updatePhone = () => {
phoneName.value = '华为'
phoneColor.value = '蓝色'
}
// 定义食物的信息
let foodName = ref('汉堡')
let foodPrice = ref('¥20')
let updateFood = () => {
foodName.value = '蛋糕'
foodPrice.value = '¥30'
}
//返回模板中需要使用的数据
return{
stuName,
stuAge,
updateStu,
carName,
carPrice,
updateCar,
phoneName,
phoneColor,
updatePhone,
foodName,
foodPrice,
updateFood
}
}
}).mount('#app')