这部分来讲vue的高级特性--$nextTick和自定义v-model，写这个主要是给自己有一个大致的印象。
一、$nextTick
直接来看代码：
<div id="demo">
<ul ref="qq"><li v-for="(item, index) in list" :key="index">{
{item}}</li>
</ul>
<button @click="push">push</button>
</div>
new Vue({el:'#demo',data(){return {list: [0,1,2,3,4,5,6,7,8,9,10]}},methods:{push(){this.list.push(11);let ul = this.$refs.qqconsole.log('DOM未被渲染完成')console.log(ul.childNodes);// alert(this.$refs.qq)// 数据变化后，DOM不会被立刻渲染this.$nextTick(function(){console.log('DOM已经渲染完成') console.log(ul.childNodes);})}}})
首先this.$nextTick之前，DOM还没有被渲染出来，但是之后，DOM是完全被渲染出来的。因为$nextTick是微元素，是异步任务，所以当上面console.log的同步任务被执行完，才执行这个异步任务的。
二、自定义v-model
先来看代码：
子组件:
<template><div><!-- 列如： vue颜色的选择 --><input type="text":value="text1"@input="$emit('change1', $event.target.value)"></div><!-- 1.上面的 input 使用 :value 而不是 v-model2.上面的 change1 和model.event1 要对应起来3. text1 属性对应起来-->
</template><script>
export default {name: 'CustomVModel',model: {prop: 'text1',// 对应 上面input的valueevent: 'change1'},props: {text1: String,default(){return ''}}
}
</script>在子组件里面定义input标签，然后给动态属性value的值和派发change1事件给父组件。
父组件：
<template><div><p>vue 高级特性</p><hr><!-- 自定义 v-model ，v-model内置:bind 和 @ --><p>{
{ name }}</p><!-- <CustomVModel v-model="name"/> --><!-- 相当于 --><CustomVModel :text1='name' @change1='value => name = value'/></div>
</template><script>
import CustomVModel from './CustomVModel'
export default {components: {CustomVModel},data () {return {name: 'hansen'}}
}
</script>父组件调用子组件，然后通过动态属性text1给子组件赋值，然后把子组件传来的value传给name。
大概图：
