指令篇

v-if和v-show

• v-if如果值为false时，在生成node树时不会生成对应的节点，不会出现在DOM中
• v-show会生成节点并插入到dom中，只是在渲染的时候，通过display:none的方式隐藏了元素

应用场景

如果元素需要频繁的切换显示/隐藏时，使用v-show更加的合适

v-if切换时性能消耗较高，v-show渲染效率更高

v-model语法糖

v-model是Vue中经常用到的一个指令了，其实它是一个语法糖，实现起来也很简单

先定义一个val的ref变量用于存放input框中的值，input元素绑定input事件，从事件参数从拿到input框中的值将其赋值到val中即可。

<template>
  <div id="app">
    <input :value="val" @input="handleChange" />
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: 'App',
  setup() {
    const val = ref('');
    const handleChange = (e) => {
      val.value=e.target.value
    };
    return {
        val,
        handleChange
    }
  },
};
</script>

对于不同的元素，发送的事件也是不同的

• text和textarea使用的是input事件和value属性
• checkbox和radio使用的是change事件和checked属性
• select使用的是change事件

onLine Demo

Vue内置的指令有哪些

指令	描述
v-show	控制元素是否显示，原理是利用display:none
v-if	控制元素是否渲染，原理是利用display:none
v-html	将指定指令值作为html文本渲染到组件上，会先清空目标中的所有内容
v-for	通常用于遍历模板
v-else	配合v-if使用
v-else-if	配合v-if使用
v-on	用于绑定事件监听器，语法糖为@
v-bind	用于传递属性到组件中，语法糖为:
v-model	双向数据绑定
v-slot	用于将组件传递到具名插槽中
v-pre	绑定的元素不进行编译，不做如何处理
v-once	绑定的元素只渲染一次，后续不在更新（性能优化）
v-memo	缓存模板子树，应该很少用到
v-cloak	用于未编译完成时隐藏元素

为什么说v-for和v-if不建议一起使用

在Vue2中，当遍历一个元素时，添加v-if指令，Vue会先将元素遍历出来，之后再通过v-if去推断是否渲染该元素（会触发指令、组件销毁重构），从这里看到v-for的优先级是高于v-if的

在Vue3中，如果这两个指令同时使用时，v-if比v-for优先级更高，注意此时v-if中无法访问到v-for作用域内定义的变量别名

风格指南 - Avoid v-if with v-for