常规

Mr.Liu大约 3 分钟

解决花括号问题

标签样式中加 v-cloak v-克楼克

在css中加

[v-cloak]{
    display:none !important;
}

Vue是一款基于MVVM架构的渐进式框架，它主要用于构建单页面应用（spa），它的特点有声明式渲染、响应式两大点

响应式就是在我们修改数据之后，无需手动触发视图更新，视图会自动更新。

vue的data是一个函数的原因是，确保每一个vue组件的实例是唯一的，数据是不共享的，更容易维护的

优点: 渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开缺点: 单页面不利于seo，不支持IE8以下，首屏加载时间长

核心：v-if 会导致组件（dom）的重新渲染，但是 v-show 不会。

v-if元素不可见，直接删除DOM，有更高的切换消耗。当 v-if 为 false 时，整个组件是不存在的，而变为 true 之后，组件会重新执行所有的生命周期回调。
v-show在整个生命周期只会触发一次。v-show通过设置元素display(迪斯普类): none(南嗯)控制显示隐藏，更高的初始渲染消耗。当 v-show 为 false 时，组件虽然看不到，但是已经存在了

所以说，判断 v-if 和 v-show 的使用条件应该是：当组件需要在指定时机创建，在指定时机销毁时，需要使用 v-if。而当组件仅需要创建一次时，则可以使用 v-show。

在Vue2中，v-for的优先级要高于v-if，但是在Vue3中，v-for的优先级要低于v-if。
在Vue2中，会先通过v-for遍历，然后对每一项使用v-if判断，不满足条件的不会渲染，但是这种方式并不好，相当于对很多个标签都添加了v-if，每次渲染之前都要判断。于是在Vue3中，v-if的优先级要高于v-for了，相当于在v-for外层包裹了一层，但是这时的判断条件肯定是错的，因此在vue3中同一标签使用v-for和v-if时，会报错。

<li v-for="tod in tods" v-if="tod.name!=''">
  {{tod.name}}
</li>

在外面包裹一层<template> 再在其上使用v-for 可以解决这个问题

用index和用随机数都是同理，随机数每次都在变，做不到专一性，也很消耗性能