1 $nextTick
Vue.js 在检测到数据发生变化时，会先开启一个队列，并在内存中循环遍历所有的数据改变，去除中间数据改变过程，直接执行实际工作（比如 for 循环改变某个变量 10 次，那么 Vue.js 只会执行最后一次更新操作）。这样可以避免不必要的计算以及 DOM 操作，从而提高性能。这个队列叫做异步更新队列。
我们来看这样一个场景：一个默认隐藏的 DIV。点击按钮后，显示这个 DIV 并获取其内容。
html：
<div id="app">
<div id="title" v-if="isShow">科普教育同样是一场接力跑</div>
<button @click="get">获取</button>
</div>
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：
<div id="app2">
<deniro-component></deniro-component>
<script type="text/x-template" id="deniro-template">
<div>无人机送快递 渐行渐近</div>
</script>
</div>
js：
Vue.component('deniro-component', {
template: '#deniro-template'
});
var app2 = new Vue({
el: '#app2'
});
渲染结果：
<div id="app2">
<div>无人机送快递 渐行渐近</div>
<script type="text/x-template" id="deniro-template">
无人机送快递 渐行渐近
</script>
</div>
通过这种方式，不管模板定义的内容有多长或者多么复杂，我们都可以应对咯。 还可以使用 webpack 来编译单文件的 *.vue，到时候就可以更优雅地编写模板代码咯O(∩_∩)O~
3 手动挂载实例
在一些特殊场景下（比如开发一些复杂组件），需要动态创建 Vue 实例，这时就会用到 Vue 的构造器Vue.extend。使用 Vue 构造器初始化实例后，我们还需要通过 $mount 来手动挂载实例。
因为 $mount() 会返回实例本身，所以可以直接调用实例的其它方法。
html：
<div id="mount-div">
</div>
js：
var DeniroComponent2 = Vue.extend({
template: '<div>智能门锁新花样：{{content}}</div>',
data: function () {
return {
content: '人脸开门原来这么简单'
}
}
});
new DeniroComponent2().$mount('#mount-div');
渲染结果：
<div>智能门锁新花样：人脸开门原来这么简单</div>
执行后，指定 div 中的内容会被直接替换为模板中定义的内容。
也可以这样挂载：
new DeniroComponent2({
el:'#mount-div'
});
