常见语法
<div v-text='n+1' /> === {{n+1}}
<div v-html='x' /> //显示粗体的内容
v-for="(value,key) in 对象或数组" :key="key" // 必须加key
watch computed methods的区别
watch:{ [key: string]: string | Function | Object | Array } 是监听数据 无缓存，watch是异步的，一般着重于执行一个函数。watch里不可以用箭头函数，因为this会指向window
computed:{ [key: string]: Function | { get: Function, set: Function } } 是计算属性，有缓存，着重于依赖之间的变化和缓存
methods:{ [key: string]: Function }
new Vue({
data:{
obj:{
a:'a'
}
}
}
watch:{
obj(){
handler:{
console.log('obj changed')
}
deep:true
// 如果改变obj.a的值，obj也会变化。相当于监听了obj里面的所有属性。“该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深”
}
}).$mount(#app)
- computed 和 methods 相比，最大区别是 computed 有缓存：如果 computed 属性依赖的属性没有变化，那么 computed 属性就不会重新计算。methods 则是看到一次计算一次。
- watch 和 computed 相比，computed 是计算出一个属性（废话），而 watch 则可能是做别的事情（如上报数据)
computed和watch的区别：
- computed是计算属性，watch是监听属性
- computed调用时不需要加括号，根据依赖自动==缓存==，如果 computed 属性==依赖==的属性没有变化，那么 computed 属性就不会重新计算。
- watch有两个选项：immediate，表示第一次渲染是否要执行，deep，是否要==监听==对象里面的属性。变化了就会执行里面的函数
Vue 的生命周期钩子函数
- beforeCreate
- created
- beforeMount
- mounted:一般在此周期内请求数据
- beforeUpdate
- updated
- beforeDestory
- destoryed
Vue 实现组件间通信
- 父子组件：使用 v-on 通过事件通信
- 组件不能修改props外部数据
$emit('update:value',value+1)可以触发事件并传参$event可以获取$emit的参数
- 爷孙组件：使用两次 v-on 通过爷爷爸爸通信，爸爸儿子通信实现爷孙通信
- 任意组件：使用 eventBus = new Vue() 来通信，eventBus.
emit 是主要API
- 任意组件：使用 Vuex 通信
Vue 数据响应式
- 是vue实现UI的核心思路，当用户改变数据时，UI就会自动更新
- 使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty是es5无法shim（shim可以将新的API引入到旧的环境中，而且仅靠就环境中已有的手段实现。），所以vue不支持IE8以下的版本
- 由于 JavaScript 的限制，Vue 不能检测到对象属性的添加或删除，解决方法是手动调用 Vue.set 或者 this.$set。使用
Vue.set(object, propertyName, value)方法向嵌套对象添加响应式 property。 - 缺点：对于一些新增的属性无法响应，因为无法监听它。vue3解决了这个问题
- data：内部数据，props：外部数据
Vue.set( target, propertyName/index, value )===this.$set
作用：
- 新增key
- 自动创建代理和监听
- 触发UI更新（但不会立即更新）
举例 ： this.$set(this.obj,’b’,100)
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
