Vue实例上的办法
- 数据
- 事件
- 生命周期
1 数据
- vm.$watch
- vm.$set
- vm.$delete
1.1 vm.$watch(exp,callback,options)
exp:String|Function
callback:参数newVal,oldVal
options:{immediate,deep}
察看Vue实例一个表达式或函数计算结果的变动，自身会返回一个勾销察看的函数，调用后勾销察看
<template> <div id="app"> <span>{{ bar.foo }}</span> <button @click="add">+</button> <span>原始值：{{ oldVal }}</span> <span>原始值：{{ newVal }}</span> </div></template><script>export default { name: "App", data() { return { bar: { foo: 0, }, oldVal: "", newVal: "", }; }, computed: { barCom() { return JSON.parse(JSON.stringify(this.bar)); }, }, methods: { add() { this.bar.foo += 1; }, }, mounted() { this.$watch( "barCom", function (newVal, oldVal) { this.newVal = newVal.foo; this.oldVal = oldVal.foo; }, ); },};</script>深度监听一个对象时，能够应用计算属性进行序列化与反序列化，不应用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 事件
- vm.$on
- vm.$emit
- vm.$once
- vm.$off
2.1 vm.$emit(eventName,...args) vm.$on(event,callback)
触发与绑定以后实例的事件
//父组件<template> <div id="app"> <Child ref="child" /> <span>{{ uname }}</span> </div></template><script>import Child from "./components/Child.vue";export default { name: "App", data() { return { uname: "", }; }, components: { Child, }, methods: { setName(val) { this.uname = val; }, }, mounted() { this.$refs.child.$on("sendToApp", this.setName); },};</script>//子组件<template> <div> <button @click="send">发送</button> </div></template><script>export default { data() { return { cname: "张三", }; }, methods: { send() { this.$emit("sendToApp", this.cname); }, },};</script>也能够在父组件中的<Child/>上用v-on的模式绑定事件，函数在父组件中解决，在子组件中触发事件传入数据，在父组件中调用，实现子组件向父组件传递数据
也能够把函数间接传给子组件，在子组件中用props接管，调用时传入参数，父组件执行回调也能接管子组件的数据
2.2 vm.$once(event,callback)
与vm.$on的作用相似，也是用于绑定事件，不过只触发一次
2.3 vm.$off(event,callback)
解绑事件，如果传入一个事件数组，能够实现解绑多个事件
无参数时，移除所有事件监听
3 生命周期
- vm.$mount
- vm.$forceUpdate
- vm.$nextTick
- vm.$destroy
3.1 vm.$mount(elementOrSelector)
手动的挂载一个未挂载的实例
const MyComponent = Vue.extend({ data(){ return { price:"九磅十五便士" } }, template:'<p>衬衫的加个是{{price}}</p>'})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()
销毁一个实例。
清理它与其余实例的连贯，解绑它全副指令及事件监听器