（十二）vue.js组件——其他$nextTick、X-Templates、手动挂载实例（6）

1)$nextTick

在vue中，dom的更新是采取异步更新队列的，即vue数据变了并不会立即就修改Dom,而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。
在缓冲时会去掉重复数据，避免不必要计算和DOM操作。

所以，在一个事件里面我们通过修改vue实例里面的数据，然后去获取此数据对应的DOM相关内容是获取不到的。

【当然，按照vue的核心思想：数据驱动DOM，我们不应该去操作DOM，但是在很多业务里我们避免不了使用第三方原生JavaScript库，这些库都有创建-更新-销毁DOM的完整生命周期，在这些库配合vue使用时，我们可能还会有轻微的操作DOM，当然，这些操作能避免就避免！】

其原因是此时DOM还没创建出来，需要直到下一个vue事件循环时，才开始创建。

这时我们就可以使用$nextTick，他能知道DOM什么时候更新完。

2)X-Templates

前面我们定义组件内容时都是直接写在template选择的字符串值中，如下：

template: `<div>my-com1</div>`,

有时候你不想将所有组件内容写成一个字符串的话，这里给你提供了一个新方法X-Template,

X-Template的含义是你能将此组件内容写在一个script里面，只要给标签加上一个id,然后组件的template选择的值就是这个id。

注意：
1.Script标签的type应该给为text/x-template
2.在script标签找那个模板内容最外层仍然只能写一个标签
3.这种写法虽然能让我们像写真正html标签一样写，但是无疑的他将模板的组件和
其他定义隔离了，这并不好。（所以，了解下这种写法，能看懂别人代码就好，并
不需要这样写）
4.也可以script写在当前可访问的任何地方，比如app的外面

实现：

3)手动挂载实例

关于【手动挂载实例】在业务开发中很难用到，只做了解就好。

前面我们所定义的所有组件都需要放在根实例绑定的模板上才能显示，现在的话，我们也以手动挂载一个实例，即不需要new Vue(),直接把组件挂到网页上。（在开发一些复杂的独立组件可能会用到）

手动挂载实例方法：
1.在创建组件时不使用Vue.component()这个方法，而使用Vue.extend()方法。
2.使用组件实例的.mount方法实现手动挂载实例

注意：
1.这个方法返回组件实例本身，因此可以链式调用他的实例方法。

2.挂载实例还可以采取下面两种方法

// 方法一
new MyCom({
el: "#app",
});

// 方法二：在文档之外渲染，并且随后挂载
var myCom = new MyCom().$mount();
document.getElementById("app").appendChild(myCom.$el);

这里要注意下：方法一和最上面实例的挂载方法无法让上面的css应用进来，
而方法二可以。当然，如果你直接给上类名到模板上那肯定是可以的了