【vue】Vue实例上的方法

Vue实例上的方法

1. 数据
2. 事件
3. 生命周期

1 数据

1. vm.$watch
2. vm.$set
3. vm.$delete

1.1 vm.$watch(exp,callback,options)

exp:String|Function
callback:参数newVal,oldVal
options:{immediate,deep}
观察Vue实例一个表达式或函数计算结果的变化，本身会返回一个取消观察的函数，调用后取消观察

深度监听一个对象时，可以使用 计算属性进行序列化与反序列化，不使用deep选项也可以实现深度监听
用deep深度监听时，只是监听到变化，oldVal与newVal都是最新的值
不使用深度监听，直接监听到具体属性可以检测变化前后的值，然后进行处理

1.2 vm.$set(target,key,value) vm.$delete(target,key)

添加或修改响应式对象的property，target不能是Vue实例或者Vue实例的根数据对象
功能与Vue.set()和Vue.delete()一致
Vue.set()和Vue.delete()

2 事件

1. vm.$on
2. vm.$emit
3. vm.$once
4. vm.$off

2.1 vm.$emit(eventName,...args) vm.$on(event,callback)

触发与绑定当前实例的事件

//父组件



//子组件

也可以在父组件中的上用v-on的形式绑定事件，函数在父组件中处理，在子组件中触发事件传入数据，在父组件中调用，实现子组件向父组件传递数据
也可以把函数直接传给子组件，在子组件中用props接收，调用时传入参数，父组件执行回调也能接收子组件的数据

2.2 vm.$once(event,callback)

与vm.$on的作用类似，也是用于绑定事件，不过只触发一次

2.3 vm.$off(event,callback)

解绑事件，如果传入一个事件数组，可以实现解绑多个事件
无参数时，移除所有事件监听

3 生命周期

1. vm.$mount
2. vm.$forceUpdate
3. vm.$nextTick
4. vm.$destroy

3.1 vm.$mount(elementOrSelector)

手动的挂载一个未挂载的实例

const MyComponent = Vue.extend({
    data(){
        return {
            price:"九磅十五便士"    
        }
    },
    template:'
衬衫的加个是{{price}}
'
})

new MyComponent().$mount("#app")

3.2 vm.$forceUpdata()

强制重新渲染Vue实例
仅仅影响实例本身和插槽内容，而不是所有子组件

3.3 vm.$nextTick(callback)

回调延迟到下次DOM更新循环之后执行
可以在改变数据后，获取到最新的DOM元素
无参数时返回一个Promise，可以使用async/await来执行同步代码
Vue.nextTick()

3.4 vm.$destroy()

销毁一个实例。
清理它与其他实例的连接，解绑它全部指令及事件监听器