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' });
本文示例代码 https://jsfiddle.net/deniro/7rg295xL/
来源: http://www.jianshu.com/p/6be94c7d3969