1. vue instance声明方式
const vm = new Vue({
el:"#app", //挂载的节点，一般都是通过id
template:`<div>{{text}}</div>`, //模板
data:{ //数据
text:0
}
})
2. vue instance 上的属性
1. vm.$data
vm.$data就是当前instance(vm)中data属性。可以通过修改vm.$data.text = 1修改上例中text的值。
2. vm.$el
vm 挂载的DOM节点
console.log(vm.$el); //输出：<div>0</div> //输出类型为object
3. vm.$options
vue实例初始化的对象，会添加一些默认参数，上例输出：
4. vm.$root
vue组件树的根实例，组件树中任意组件访问的vm.$root都是一样的，上例中没有父实例，所以输出为自己
5. vm.$parent
vm的父实例。
6. vm.$props
当前组件接受的props对象
7. vm.$children
当前实例的子组件
8. vm.$slots vm.$scopedSlots
插槽概念
9. vm.$refs
注册过ref的DOM元素或者组件实例
10. vm.$isServer
用来判断是否在服务器端，主要用于服务端渲染的时候。
3. vue instance 上的方法
1. vm.$watch
vm.$watch功能上和vue实例中的watch方法相同
const vm = new Vue({
el: "#app",
template: `<div>{{text}}</div>`,
data: {
text: 0
},
// watch: {
// text(newValue,oldValue){
// console.log(`${oldValue} : ${newValue}`);
// }
// },
})
setInterval(() => {
vm.$data.text += 1;
}, 1000)
//text : 监听的属性值
//newValue: 变化之后text的值
//oldValue: 变化之前text的值
vm.$watch('text', (newValue,oldValue) => {
Console.log(`${oldValue} : ${newValue}`);
})
//上述vm.$watch实现方法和 vm实例中watch中实现的功能相同
不同点：
vm 中watch的对text的监听在vm实例销毁的时候自动移除。
通过vm.$watch添加的监听，需要主动移除监听。
移除方法：
//上例代码修改
//text : 监听的属性值
//newValue: 变化之后text的值 新值参数在前
//oldValue: 变化之前text的值 老值参数在后
//vm.$watch 最后会返回一个方法（unWatch）,通过调用unWatch()移除监听
const unWatch = vm.$watch('text', (newValue, oldValue) => {
console.log(`${oldValue} : ${newValue}`);
//setTimeout 中2S移除监听，
//输出结果因为：
//0 : 1
//1 : 2
})
// 2S 后移除vm.$watch监听
setTimeout(() => {
unWatch();
}, 2000)
2. vm.$on 、vm.$once、vm.$emit、vm.$off
绑定：vm.$on 、vm.$once(只触发一次)
触发：vm.$emit
移除：vm.$off
setInterval(() => {
vm.$data.text += 1;
//触发指定事件 vm.$data.text为触发事件所带的参数
vm.$emit('eventOne', vm.$data.text);
}, 1000)
//绑定eventOne事件 触发事件所携带的参数，将作为函数的参数传入
//vm.$once //也是绑定事件方法，用法一样；区别:vm.$once只能触发一次
vm.$on('eventOne', (param1) => {
console.log(`eventOne emited ${param1}`)
})
3. vm.$set、vm.$delete
vm.$set 是给响应式的对象（基本都是vue实例中的data对象）添加一个新的属性，并且这个新的属性也是响应式的。
响应式解释：就是当这个对象改变的时候，vue会重新渲染
问题场景：当前vm实例的data中新增一个obj:{}属性，在运行过程中添加了一个a属性，即obj：{a:1}，此时的obj.a是不具备响应式的。
解决方法：1.（推荐）在定义obj的时候，首先考虑到后续用到的值，通过obj：{a:0}方式提前定义
2.（不推荐）使用vm.$forceUpdate()强制重新渲染当前实例
原因：开销比较大
3. 使用vm.$set
//此时obj.a每次改变，都会重新渲染
const vm = new Vue({
el: "#app",
template: `<div>{{obj.a}}</div>`,
data: {
text: 0,
obj: {}
},
})
let i = 1;
setInterval(() => {
i++;
vm.$set(vm.obj, 'a', i);
}, 1000)
vm.$delete 删除对象属性。响应式对象删除的时候会更新视图