说说 Vue.js 组件的高级特性-续篇

1 $nextTick

Vue.js 在检测到数据发生变化时，会先开启一个队列，并在内存中循环遍历所有的数据改变，去除中间数据改变过程，直接执行实际工作（比如 for 循环改变某个变量 10 次，那么 Vue.js 只会执行最后一次更新操作）。这样可以避免不必要的计算以及 DOM 操作，从而提高性能。这个队列叫做异步更新队列。

我们来看这样一个场景：一个默认隐藏的 DIV。点击按钮后，显示这个 DIV 并获取其内容。

html：

    
科普教育同样是一场接力跑
    获取

js：

var app = new Vue({
    el: '#app',
    data: {
        isShow: false
    },
    methods: {
        get: function () {
            this.isShow = true;
            console.log(document.getElementById('title').innerHTML);
        }
    }
});

效果：

看效果，点击按钮后，DIV 显示出来了。但却无法获取 DIV 中的数据：

因为 Vue.js 中的异步更新队列特性，所以在执行 this.isShow = true; 之后，实际上还未真正创建 DIV。这个 DIV 要到下一个 Vue 事件循环时，才会被创建。

使用 $nextTick，就可以在 DOM 真正更新之后，再执行相关操作啦O(∩_∩)O~

js 代码修改如下：

methods: {
    get: function () {
        this.isShow = true;
         console.log(document.getElementById('title').innerHTML);
        this.$nextTick(function () {
            console.log(document.getElementById('title').innerHTML);
        });
    }
}

Vue.js 的核心思想是数据驱动 DOM，所以一般情况下，我们不会去主动操作 DOM。但有时候，我们需要去调用一些基于原生的 JS 库，这些库有创建、更新以及销毁等涉及生命周期的操作，这时我们就要用好 $nextTick 咯。

2 X-Templates

有时候，我们定义的模板内容很长、很复杂。这时我们可以在

js：

Vue.component('deniro-component', {
    template: '#deniro-template'
});

var app2 = new Vue({
    el: '#app2'
});

渲染结果：

    
无人机送快递 渐行渐近
    

通过这种方式，不管模板定义的内容有多长或者多么复杂，我们都可以应对咯。 还可以使用 webpack 来编译单文件的 *.vue，到时候就可以更优雅地编写模板代码咯O(∩_∩)O~

3 手动挂载实例

在一些特殊场景下（比如开发一些复杂组件），需要动态创建 Vue 实例，这时就会用到 Vue 的构造器Vue.extend。使用 Vue 构造器初始化实例后，我们还需要通过 $mount 来手动挂载实例。
因为 $mount() 会返回实例本身，所以可以直接调用实例的其它方法。

html：

js：

var DeniroComponent2 = Vue.extend({
    template: '
智能门锁新花样：{{content}}
',
    data: function () {
        return {
            content: '人脸开门原来这么简单'
        }
    }
});
new DeniroComponent2().$mount('#mount-div');

渲染结果：

智能门锁新花样：人脸开门原来这么简单

执行后，指定 div 中的内容会被直接替换为模板中定义的内容。

也可以这样挂载：

new DeniroComponent2({
        el:'#mount-div'
});

本文示例代码