v-model

注意点:

text和textarea元素使用value属性和input事件
checkbox和radio使用checked属性和change事件
select使用value和change事件

<template> <div class="son"> <!-- 这里的v-bind="$attrs"是继承了其他各位的attribute(属性) --> <input v-bind="$attrs" :checked="value" @change="update"> </div> </template> <script> export default { model: { prop: 'value', event: 'change' }, props: { value: { type: Boolean } }, methods: { update(e) { this.$emit('change', e.target.checked) } }, } </script>

$nextTick

动态组件和异步组件

这表示当我们每次去切换 component 的时候，模板（component 中的 template）总会去重新渲染，而我们知道每次的 DOM 渲染其实是很消耗性能的操作，那么如果想要避免这样反复渲染的话可以通过 <keep-alive> 标签来告诉 Vue，去缓存已经被渲染过的 component。

<keep-alive> 的使用非常简单，只需要使用 <keep-alive> 来包裹住 <component :is="componentId"></component> 就可以了。代码如下：

<keep-alive>
    <component :is="componentId"></component>
</keep-alive>

异步组件：

用v-if控制组件的加载，需要的时候再加载，不需要就不加载

keep-alive