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

有时候，我们定义的模板内容很长、很复杂。这时我们可以在 <script> 标签（类型为 text/x-template ）中定义好，然后通过 id 进行引用。

html：

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'});复制代码