回顾vue2 ，更好的学习vue3
vue 特点
vue是一个渐进式的js框架
1、组件化，好维护。
2、声明式编码，无需操作dom元素。
3、虚拟DOM + diff算法
初识Vue
1、vue 工作必须创建vue实例对象，并且要传入配置对象。
2、root容器代码依然符合html的规范，不过是混入一些特殊的vue语句。
3、root容器里面的代码被成为vue模板。
new vue({
el: '#id'， // 指定容器
data:{
a:'1'
}
})
一个容器只能被一个vue实例对象接管。
v-bind:href ="" =====》 :href=""
vue模板语法
1、插值语法： 用于解析标签内容。
写法{{xxxx}} xx 是js表达式，且可以直接读取到data中的数据。
2、指令语法： 用于解析标签（包括标签属性，标签体内容，绑定事件...）
写法v-bind:href ==> :href 单向数据绑定。
v-model:href ===> v-model:href=‘href’ v-model 默认绑定的是value的值，只能用在输入元素上。
mvvm模型
m 模型 -------> data的数据
v 视图 ---------> 模板 -----> dom页面
vm 视图模型 ----> vue实例对象
数据代理
// 数据代理
Object.defineProperty // 给一个对象添加属性
let person = {
name:'张三',
sex:'男'
}
let num = 18
Object.defineProperty(person, 'age', {value: 18}) // 不可修改 不可枚举
Object.defineProperty(person, 'age', {
value: num,
enumerable:true, // 控制属性是否可枚举， 默认值是false
writable: true, // 是否可修改 默认值是false
configurable: true, // 是否可被删除
get: function() {
return 'hello' // 当有人读取person 的age 属性时，get(getter)函数会被调用且返回值就是age的值
},
set: function(val){
num = val // 修改person的age属性时，set(setter) 函数就会被调用，且会收到修改的具体值
}
})
// 数据代理，通过一个对象对另一个对象中的数据的读写操作
let obj1 = {x:1}
let obj2 = {y:2}
Object.defineProperty(obj1, y, {
get(){
return obj2.y
},
set(val) {
obj2.y =val
}
})
简单来说，数据代理就是使用object.definepropety面的set和get函数，通过一个对象对另外一个对象中的数据进行读写操作。
vue中的数据代理
- 通过vm对象来代理data中的对象属性的操作（读写）
- vue中数据代理的好处：
- 更加方便的操作data中的数据。
- 基本原理：
- 通过object.defineproprty() 把data对象中的所有属性添加到vm身上，
- 为每个添加到vm上的属性都指定一个getter 和 setter
- 在getter 和 setter 函数内部去操作（读写）data中的属性。
事件处理
click
v-on:click -> @click
方法中的event 获取
1. @click = onclick ------> onclick(event)
2. @click = onclick($event, 参数) ----> obnclick(event, 参数)
事件修饰符
- .prevent (阻止默认行为)
- .stop (阻止事件冒泡)
- .once (事件只触发一次)
- .capture (事件 捕获模式)
- .self (只有event.target 是当前操作的元素才能触发事件)
- .passive (事件的默认行为立即执行，无需等待回调事件的执行完毕)
计算属性
计算属性
定义： 要使用的属性不存在，要通过已有的属性进行计算得来的
原理： 底层使用的object.defineproperty 里面的setter和getter函数
get函数什么会被调用：
1、当初次读取的时候会被调用一次。
2、当所依赖的属性发生修改时，再次被调用
优势： 与mathed实现相比,内部有缓存机制（可复用），效率更高，调试方便。
备注：
计算属性最终会出现在vm上，直接读取即可
如果计算属性要被修改，就必须使用set函数去响应修改，并且set要引起计算时所依赖的数据发生改变。
注意： 计算属性不能有异步计算
计算属性为什么不支持异步计算
因为计算属性是基于所依赖值的同步计算的，这是因为计算属性的定义决定了它必须是同步的，计算属性的定义是“依赖值该变，计算属性就会改变”，因此计算属性必须是同步的响应其所依赖值的变化，以确保计算属性的稳定性和可预测性。
computed:{
fullname:{
get() {
// get的作用是，当有人读取fullName时，get会被调用，且返回值作为fullname的值
// get什么时候调用： 初次渲染fullname时， 所依赖的数据发生改变时。
return this.x + this.y
},
set(val) {
// 非必须要写 除非被修改
// set 什么时候调用： 当fullname被改变的时候
this.x = val
}
},
// 简写格式
fullname(){
return this.x + this.y
}
},
监视属性
watch:{
isHot:{
handler() {
// 当前isHot 发生改变时，调用
// 计算属性也可以监视
// 当被监视的属性发生改变时，回调函数自动调用，进行操作
// 监视的属性必须存在，才能进行监视
// 监视的两种写法 1、new vue的时候传入watch的配置 2、vm.$watch('isHot', {})
},
deep: true
// deep 深度监听
// vue中的watch默认不检测对象内部值的改变（只监视一层）
// 配置deep可以检测对象内部值的改变（多层）
// 备注：
// 1、vue自身可以监视对象内部值的改变，但是vue提供的watch默认不可以
// 2、使用watch时根据数据的具体结构，决定是否采用深度监视。
},
// 简写 不使用深度监听和立即监听
isHot(v) {
console.log(v)
}
// 注意： 计算属性不能有异步计算
// computed 和 watch 之间的区别
// computed 能完成的功能，watch 都可以完成。
// watch 能完成的功能，computed不一定能完成，例如： watch 可进行异步操作，
// computed 可缓存
// 关于this指向的说明
// 所被vue 管理的函数，如果写成普通函数这样，this指向的是vm或者组件实例对象。
// 所有不被vue管理的函数，如（定时器函数，axios的回调函数等）最好写出箭头函数，这样this的指向才是vm 或者组件实例对象
},
