2021-11-11 vue5

1.深度监视：

        1.1.vue中的watch默认不监测对象内部值的改变（一层）

        1.2.配置deep:true可以监测对象内部值改变（多层）

备注：

        （1）vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以

        （2）使用watch时根据数据的具体结构，决定是否采用深度监视

2.computed和watch之间的区别：

        2.1.computed能完成的功能，watch都可以完成

        2.2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则：

        （1）所被vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象

        （2）所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等），最好写成箭头函数，这样this指向的才是vm 或 组件实例对象

3.绑定样式：

        3.1.class样式

                写法：class="xxx" xxx可以是字符串、对象、数组

                        字符串写法适用于：类名不确定，要动态获取

                        对象写法适用于：要绑定多个样式，个数不确定，名字也不确定

                        数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

        3.2.style样式

                :style="{fontSize: xxx}" 其中xxx是动态赋值

                :style="[a,b]" 其中a，b是样式对象

4.条件渲染:

        4.1.v-if

                写法：

                        （1）v-if="表达式"

                        （2）v-else-if="表达式"

                        （3）v-else="表达式"

                适用于：切换频率较低的场景

                特点：不展示的DOM元素直接被移除

                注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”

        4.2.v-show

                写法：v-show="表达式"

                适用于：切换频率较高的场景

                特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

        4.3.备注：使用v-if时，元素可能无法被获取，而使用v-show一定可以获取到

5.v-for指令：

        5.1.用于展示列表数据

        5.2.语法：v-for="(item,index) in xxx" :key="yyy"

        5.3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）