vue基础知识点以及v-if和v-show,key值作用,计算属性和监听器区别等面试题

         1.学习目标： v-model修饰符用法

          2.语法

            v-model.lazy : 在change时触发而非inupt时（失去焦点或enter键的时候才会绑定数据）

            v-model.number : 输入字符串转为有效的数字 (有效：能转数字就转,不能转就不转)

            v-model.trim : 去掉字符串首尾空格

 1.默认情况下, v-model指令绑定的是表单元素的value值  (复选框checkbox除外)

        2.如果遇到复选框checkbox

            非数组 : 一般用于单个复选框,此时绑定的是checked属性

            数组   : 一般用于多个复选框，此时绑定的是value属性

v-show和v-if区别

 (1)作用：设置元素的css样式 display

            (2)语法： v-show="属性值"

                属性值为true:   display:block

                属性值为false:  display:none

            (3)v-show与v-if区别

                v-if  : 条件渲染。 本质是dom元素的 新增与移除

                v-show: 一定会渲染。 本质是改变css样式display

 【v-if与v-show逐字稿 : 原理 -> 应用场景 -> 为什么这样用 】

        面试官你好，我是这么理解v-if和v-show的。 v-if本质其实是动态的创建 或者 删除元素节点。一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。v-show本质是在控制元素的 css 样式,display: none;，一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。

    【key值作用】

            面试官你好，我是这么理解key值的。 key值的主要作用是给元素添加一个唯一标识符，用于提高vue渲染性能。当data发生变化的时候，vue会使用diff算法来对比新旧虚拟DOM。

            如果key值相同,才会考虑复用元素。如果key值不同，则会强制更新元素。一般通过给元素key值设置为id,来保证vue在更新数据的时候可以最大限度复用相同key值的元素。

    【key值为什么不能是下标】

        因为数组的长度发生变化的时候，其他的元素下标会受到影响。而如果把下标作为key值，由于其他的元素下标变化。所以vue会认为你的key值也变化了，就会强制更新你的元素，影响性能。

    【计算属性和侦听器区别】

        1.功能不同 :  计算属性解决模板语法冗余， 侦听器监听data中某一个数据变化

        2.计算属性有缓存,侦听器没有缓存

        3.计算属性不支持异步操作，侦听器支持异步操作

        4.计算属性可以新增一个属性, 而侦听器一定要是data中的属性