Lyd的笔记
Vue
Vue Tips

Vue Tips

1.vue基础知识

  • 容器与Vue实例一一对应。真实生产开发中，只会有一个Vue实例。不同的网页模块用组件进行实现，最终这些组件组装成一个网页。
  • 由vue管理的函数，一定不能写成箭头式函数，否则，该函数就不由vue管理了。
  • vue中data下的才做数据劫持和数据代理，而methods不会。methods配置的函数放在data下也可以正常运行，但会使得vue数据代理的内容过于臃肿，强烈建议不要这样做。
  • 箭头函数没有自己的this，会往作用域的外部找this

2.模板语法

  • 使用指令语法，例如v-bind:var="xxx"或者:var="xxx"，vue会将引号中的内容当做js表达式进行执行。
  • 插值语法用于解析标签体内容:{{}}。
  • 指令语法用于解析标签。通常语法形式为v-xxxx。
  • 函数在指令语法中，无参时可以加小括号或者不加；在插值语法中一定要加小括号，否则会打印函数体本身，而不是执行函数

3. 数据绑定

  • v-model只能应用于表单元素上，即能够输入值的元素（具有value值），或和用户能交互的元素。

4. MVVM模型和VUE

  1. M是指模型Model，对应js中的objects，记录了数据data
  2. V是指视图View，对应页面中的dom元素，生成了页面视图
  3. VM是指视图模型ViewModel，即VUE实例对象，完成了dom监听、数据代理、数据劫持、数据绑定等功能

5. 数据代理

Object.defineProperty方法添加的属性，默认不参与枚举（或遍历），无法被修改，无法被删除

// 该方法添加的属性默认不参与枚举（或遍历），无法被修改，无法被删除
Object.defineProperty(person,'age',{

    enumerable: true, // 控制属性是否参与枚举，默认false
    // writable: true, // 控制属性是否被修改， 默认false
    configurable: true, // 控制属性是否能被删除，默认false

    // getter在读取该属性（这里是age属性）时会被调用，且函数返回值为该属性（age）的值
    // getter不能和writable同时使用
    get(){
        console.log("有人读取了age")
        return number
    },

    // setter在修改该属性（age）时会被调用，并执行代码逻辑
    set(value){
        console.log("有人修改了age")
        number = value
    }
})

数据代理：通过一个对象代理对另一个对象中属性的操作（读和写）

vue中的数据代理使得编写代码更简单方便，实现原理即为Object.defineProperty，vm中的数据存储在_data之中。并且，_data又进行了数据劫持，数据劫持的原因是修改了变量后，网页数据能立即随之改变，即响应式操作，因此需添加观察者（Observer）。

6. 事件处理

事件修饰符

  • 嵌套事件时，事件捕获阶段是从外到内，事件冒泡阶段是从内到外。事件先进入捕获阶段再进入冒泡阶段，并且默认是在事件冒泡阶段开始处理事件。
  • 事件修饰符passive，不是所有事件都适用，在移动端开发中会经常使用到
  • 事件修饰符支持链式调用

键盘事件

  • vue中的按键别名

  • tab键只能配合keydown使用
  • 系统修饰键 (用法特殊) : ctrl、alt、shift、meta
    • 配合keyup使用: 按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
    • 配合keydown使用: 正常触发事件。
  • 系统修饰键+其他按键用法

7. 计算属性

  • 定义: 要用的属性不存在，要通过已有属性（vue管理的属性）计算得来。
  • 原理: 底层借助了Object.defineproperty方法提供的getter和setter。
  • get函数什么时候执行?
    • 初次读取时会执行一次。
    • 当依赖的数据发生改变时会被再次调用。
  • 优势: 与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便
  • 备注:
    • 计算属性最终会出现在vm上，直接读取使用即可。
    • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
  • Tips：
    • 计算属性中所用的任何vue中的数据即this.xxx的值发生改变时，计算属性都会重新去计算值

8.监视属性

  • 当被监视的属性变化时，回调函数handler自动调用，进行相关操作
  • 监视的属性必须存在，才能进行监视!!
  • 监视的两种写法:
    • new Vue时传入watch配置
    • 通过vm.$watch监视

深度监视

  • Vue中的watch默认不监测对象内部值的改变(一层)
  • 配置deep:true可以监测对象内部值改变(多层)
  • 备注:
    • Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以!
    • 使用watch时根据数据的具体结构，决定是否采用深度监视。

9.计算属性和监视属性比较

  1. computed能完成的功能，watch都可以完成。computed的代码实现更为简便
  2. watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。

两个重要的小原则:

  • 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
  • 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数等)，最好写成箭头函数,这样this的指向才是vm或组件实例对象。

10.绑定样式

  • class样式
    • 写法:class=“xxx”xxx可以是字符串、对象、数组。
      • 字符串写法适用于:类名不确定，要动态获取。
      • 数组写法适用于:要绑定多个样式，个数不确定，名宁也不确定。
      • 对象写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  • style样式
    • 对象写法:style="{fontsize: xxx}“其中xxx是动态值。
    • 数组写法:style="[a,b]“其中a、b是样式对象。样式对象中的key值必须是css中存在的样式关键字。

11.条件渲染

  • v-if
    • 写法：
      • v-if=“表达式”
      • v-else-if=“表达式”
      • v-else=“表达式”
    • 适用于:切换频率较低的场景。
    • 特点:不展示的DOM元素直接被移除。注意: v-if可以和v-else-if、v-else一起使用，但要求结构必须连续，不能被“打断”
  • v-show
    • 写法:v-show=“表达式”
    • 适用于:切换频率较高的场景。
    • 特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
  • 备注:
    • 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
    • template不会改变页面结构，但只能配合v-if使用

12.列表渲染

key的基本原理

B站讲解：10:30开始

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

  1. 虚拟DOM中key的作用:
  • key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据**[新数据]生成[新的虚拟DOM]，随后Vue进行[新虚拟DOM]与[旧虚拟DOM]** 的差异比较。
  1. 对比规则:
  • 旧虚拟DOM中找到了与新虚拟DOM相同的key:
    • 若虚拟DOM中内容没变，直接使用之前的真实DOM
    • 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
  • 旧虚拟DOM中未找到与新虚拟DOM相同的key，则创建新的真实DOM，随后渲染到到页面。
  1. 用index作为key可能会引发的问题:
  • 1.若对数据进行逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低。
  • 2.如果结构中还包含输入类的DOM，会产生错误DOM更新 ==> 界面有问题
  1. 开发中如何选择key?
  • 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
  • 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示使用index作为key是没有问题的。

Vue监视数据的原理

  1. vue会监视data中所有层次的数据
  2. 如何监测对象中的数据?
    1. 通过setter实现监视，且要在new Vue时就传入要监测的数据。
    2. 对象中后追加的属性，Vue默认不做响应式处理
    3. 如需给后添加的属性做响应式，请使用如下API: Vue.set(target，propertyName/index，value) 或vm.$set(target,propertyName/index， value)
  3. 如何监测数组中的数据?
    1. 通过包裹数组更新元素的方法实现，本质就是做了两件事:
      1. 调用原生对应的方法对数组进行更新。
      2. 重新解析模板，进而更新页面。
  4. 在Vue修改数组中的某个元素一定要用如下方法:
    1. 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2. Vue.set() 或 vm.$set()
  5. 特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性!!

13.收集表单数据

  • 若:<input type="text”/>，则v-model收集的是value值，用户输入的就是value值。
  • 若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值.
  • 若:<input type="checkbox"/>
    1. 没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
    2. 配置input的value属性:
      1. v-model的初始值是非数组，那么收集的就是checked (勾选 or 未勾选，是布尔值)
      2. v-model的初始值是数组，那么收集的的就是value组成的数组
  • 备注: v-model的三个修饰符:
    • lazy:失去焦点再收集数据
    • number:输入字符串转为有效的数字
    • trim:输入首尾空格过滤

14.VUE内置指令

  • v-bind：单向绑定解析表达式，可简写为 :xxx

  • v-model：双向数据绑定

  • v-for：遍历数组/对象/字符串

  • v-on：绑定事件监听，可简写为@

  • v-if：条件渲染（动态控制节点是否存存在）

  • v-else：条件渲染（动态控制节点是否存存在）

  • v-show：条件渲染（动态控制节点是否存展示）

  • v-text指令：

    1. 作用:向其所在的节点中渲染文本内容。
    2. 与插值语法的区别:v-text会替换掉节点中的内容，{{xx}}则不会。

  • v-html指令:

    1. 作用:向指定节点中渲染包含html结构的内容。
    2. 与插值语法的区别:
      1. v-html会替换掉节点中所有的内容，{{xx}}则不会。
      2. v-html可以识别html结构。
    3. 注意: v-html有安全性问题!! !!
      1. 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
      2. 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!

  • v-cloak指令(没有值) :

    1. 本质是一个特殊尿性，Vue实例创建完毕并接管容器后，会删掉v-cloak屁性。
    2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

  • v-once指令:

    1. v-once所在节点在初次动态渲染后，就视为静态内容了。
    2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

  • v-pre指令:

    1. 跳过其所在节点的编译过程。
    2. 可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。
最后更新于
Vue.js开发过程 Notes