vue绑定属性, 条件渲染,列表渲染,虚拟DOM中key的作用,用index作为key可能会引发的问题,开发中如何选择key,Vue监视数据的原理:

一. 绑定属性

绑定样式:

    1. class样式

        写法:class='xxx' xxx可以是字符串,对象,数组

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

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

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

    2. style样式

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

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

二. 条件渲染

条件渲染:

    1. v-if

        写法:

            (1).v-if='表达式'

            (2).v-else-if='表达式'

            (3).v-else='表达式'

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

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

        注意:v-if可以和v-else-if,v-else一起使用,但要求结构不能被'打断'

    2. v-show

        写法:v-shoe='表达式'

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

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

    3. 备注:使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到

三. 列表渲染

v-for指令:

    1. 用于展示列表数据

    2. 语法:v-for='(item,index) in xxx' :key='yyy'

    3. 可遍历:数组,对象,字符串(用得少),指定次数(用得少)

面试题:react,Vue中的key有什么作用?(key的内部原理)

    1. 虚拟DOM中key的作用:

        key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM],随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较,比较规则如下:

    2. 对比规则:

        (1).旧虚拟DOM中找到了新虚拟DOM相同的key:

            a.若虚拟DOM中内容没变,直接使用之前的的真实DOM!

            b.若虚拟DOM中内容变了,则生成新的真是DOM,随后替换掉页面之前的真实DOM.

        (2).旧虚拟DOM未找到与新虚拟DOM相同的key

            创建新的真是DOM,随后渲染到页面.

    3. 用index作为key可能会引发的问题:

        (1).若对数据进行逆序添加,逆序删除等破坏顺序操作:

            会产生没有必要的真实DOM更新==>界面效果没有问题,但效率低

        (2).如果结构中还包含输入类DOM:

            会产生错误DOM更新==>界面有问题

    4. 开发中如何选择key?

        (1).最好使用每条数据的唯一标识作为key.比如id,手机号,身份证号,学号等唯一值.

        (2).如果不存在对数据的逆序添加,逆序删除等破坏顺序的操作,仅用于渲染列表用于展示,使用index是作为key是没有问题的.

Vue监视数据的原理:

    1. Vue会监视data中所有层次的数据

    2. 如何监测对象中的数据?

        通过setter实现监视,且要在new Vue时就传入要监测的数据

            (1).对象中后追加的属性,Vue默认不做响应式处理

            (2).如需给后追加的属性做响应式,请使用如下API:

                Vue.set(target,propertyName/index,value)或

                vm.$set(target,propertyName/index,value)

    3. 如何监测数组中的数据?

        通过包裹数组更新元素的方法实现,本质就是做了两件事

        (1).调用原生对应的方法对数组进行更新

        (2).重新解析模板,进而更新页面

    4. 在Vue修改数组中的某个元素一定要用如下方法:

        1. 使用这些API:push(),pop(),shift(),unshift().splice(),sort(),reverse()

        2. Vue.set()或vm.$set()

    特别注意:Vue.set()和vm.$set()不能给vm或者vm的根数据对象添加属性!!!!