Vue.js实例方法-创新互联

3、数据访问

3-1、vm.$data

用来访问组件实例观察的数据对象，该对象引用组件实例化时选项中的data属性

3-2、vm.$options

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处：

new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // -> 'foo'
}
})

实例方法

1、数据

1-1、vm.$watch( expOrFn, callback, [options] )

参数：expOrFn -->  一个字符串 或者 函数

     callback  -->  函数

         [options] -->  对象

         deep  -->  布尔值

         immediate  --> 布尔值

返回值：unwatch --> 函数

用法：

观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

注意：在变异（不是替换）对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

代码示例如下：

// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
    // 做点什么
})
// 函数
vm.$watch(
        function () {
            return this.a + this.b
        },
        function (newVal, oldVal) {
            // 做点什么
        }
)

vm.$watch 返回一个取消观察函数，用来停止触发回调：

var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()

选项：deep

为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

vm.$watch('someObject', callback, {
    deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

选项：immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

vm.$watch('a', callback, {
    immediate: true
})
// 立即以 `a` 的当前值触发回调

1-2、vm.$set( object, key, value )

这是全局 Vue.set 的别名

参数：{Object} object

         {string} key

         {any} value

返回值：设置的值

1-3、vm.$delete( object, key )

这是全局 Vue.delete 的别名

参数：{Object} object

         {string} key

2、事件

2-1、vm.$on( event, callback )

参数：{String} event

         {Function} callback

用法：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

示例：

vm.$on('test', function (msg) {
    console.log(msg)
})
vm.$emit('test', 'hi')
// -> "hi"

2-2、vm.$once( event, callback )

参数：{String} event

         {Function} callback

用法：监听一个自定义事件，但是只触发一次，在第一次触发之移除除监听器。

2-3、vm.$off( [event, callback] )

参数：{String} event

         {Function} callback

用法：移除事件监听器。

    （1）、如果没有提供参数，则移除所有的事件监听器；

    （2）、如果只提供了事件，则移除该事件所有的监听器；

    （3）、如果同时提供了事件与回调，则只移除这个回调的监听器。

2-4、vm.$emit( event, […args] )

参数：{String} event

     [...args]

用法：触发当前实例上的事件。附加参数都会传给监听器回调。

3、生命周期

3-1、vm.$mount( [elementOrSelector] )

参数：

    {Element | string} [elementOrSelector]

    {boolean} [hydrating]

返回值：vm - 实例自身

用法：

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。

这个方法返回实例自身，因而可以链式调用其它实例方法。

var MyComponent = Vue.extend({
    template: '
Hello!
'
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

3-2、vm.$forceUpdate()

迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

3-3、vm.$nextTick( callback )

参数：{Function} callback

用法：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

示例代码如下：

new Vue({
    // ...
    methods: {
        // ...
        example: function () {
            // 修改数据
            this.message = 'changed'
            // DOM 还没有更新
            this.$nextTick(function () {
                // DOM 现在更新了
                // `this` 绑定到当前实例
                this.doSomethingElse()
            })
        }
    }
})

3-4、vm.$destroy()

完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。  触发 beforeDestroy 和 destroyed 的钩子。

注意：在大多数场景中你不应该调用这个方法。最好使用 v-if 和 v-for 指令以数据驱动的方式控制子组件的生命周期。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。