vue知识点1

**

计算属性

**

• 有什么用？
  • 我们Vue的HTML模板中是可以写一些简单的表达式的，但是当逻辑比较复杂时，如果还直接写在HTML中，就显示不太合适了 比较臃肿 可读性较差，所以，这个时候就要考虑使用计算属性来重构了
  • 如果需要根据某些数据计算出一个新的结果，我们用计算属性就比较合适
• 使用注意点：
  • 都定义在computed选项中
  • 每个计算属性就是一个函数，函数的返回值就是该计算属性的值
  • 在模板中使用计算属性时，不需要加小括号调用（加了会GG），直接把函数名当做data使用就阔以鸟
  • 计算属性时依赖数据动态计算值的，也就是说，以来的数据变了，计算属性的值就会跟着变
• 计算属性和方法的区别
  • 计算属性有缓存（基于所依赖的数据，当数据没有发生变化时，多次使用，用的是已缓存的数据，只有当所依赖的数据发生变化后，才会重新计算）
  • 方法木有缓存，多次使用都会调用执行内部的代码

**

侦听器：

**

• 用来监听数据的变化从而响应某种操作，适合处理异步操作
• 注意：侦听器的名字必须和数据名一致
• 侦听器和计算属性的区别：
  • 计算属性的值是需要同步的返回，而侦听器是不需要返回值的
  • 计算属性里面不适合做异步操作，而侦听器就适合
  • 使用场景：
    • 如果没有异步操作，又需要根据数据的变化计算出一个结果，就用计算属性
    • 如果有异步操作，或仅需要根据数据的变化响应某种操作，就用侦听器
• 侦听器和blur事件的区别：侦听器只有当数据真正发生变化时才会触发函数，而blur事件不管数据有没有发生变化都会触发事件处理函数

**

过滤器：

**

• 可以对数据进行过滤（格式化），通过Vue.filter定义全局过滤器，通过new Vue({ fitlers: {} })定义局部过滤器，参考全局/局部指令
• 语法：Vue.filter(‘uppercase’, function (originVal) { return newVal })
  • 第一个参数是过滤器名称
  • 第二个参数是处理函数
    • 处理函数的第一个参数是被过滤的源数据
    • 处理函数的返回值，就是最终过滤后的值
• 使用：
  {{ msg | uppercase }}
• 带参数的过滤器：
  • 定义：Vue.filter(‘dateformat’, (originVal, pattern) => dateformat(originVal, pattern))
  • 使用：
    {{ user.regAt | dateformat(‘yyyy-MM-dd hh:mm:ss’) }}

**

Vue生命周期钩子：

**

• 说白了，就是Vue实例从出生到死亡的过程，Vue在一些关键的时间节点都给开发者提供了回调函数
• 分为四个阶段：
  • 创建（只会触发一次）：beforeCreate、created
  • 挂载（只会触发一次）：beforeMount、mounted
  • 更新（会触发N次，只要数据有更新就会触发）：beforeUpdate、updated
  • 销毁（只会触发一次）：beforeDestroy、destroyed

**

Vue数组类型数据操作：

**

• 变异方法Vue直接支持响应式（数据驱动视图）
• 非变异方法是不支持响应式的，但是可以通过重新赋值达到触发视图更新的目的
• 补充说明：数组的变异方法就是调用完该方法后会影响原数组的方法，反之，不会影响原数组的方法就是非变异方法

**

Vue自带的修改数据直接支持响应式方法：

**

• Vue.set(data中的对象或数组, 键名或索引, 值)
• vm.$set(data中的对象或数组, 键名或索引, 值) （推荐使用这种）
• 补充说明：
  • 如果能拿到实例对象就用vm.$set，否则就用Vue.set
  • vm实例在创建时（created阶段）data中已经存在的对象属性，是支持响应式的，而在后续添加的是不支持响应式的