Vue.js

数据响应式：

• 如何理解响应式

  • html5中的响应式(屏幕尺寸的变化导致样式的变化)
  • 数据的响应式(数据的变化导致页面内容的变化)

• 什么是数据绑定

  • 就是将数据填充到标签中

• v-once 只编译一次

  • 显示内容之后不再具有响应式功能

• v-model

  • 双向数据绑定

事件修饰符：

• .stop 阻止冒泡

  • <a v-on:click.stop="xxxx">跳转</a>
• .prevent 阻止默认行为

  <a v-on:click.prevent="handle">跳转</a>`

  handle (event) {
    event.preventDefault()
  }

---

计算属性

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

computed: {
  reversedMessage () {
    return this.msg.split('').reverse().join('')
  }
}

计算属性和方法的区别是什么？

• 计算属性是基于它们的依赖进行缓存的(如果内部值不发生变化，就算多次调用，实际上用的都是第一次调用的那个结果)
• 方法不存在缓存(每调用一次都会重新执行一次)

---

watch 侦听器

监听数据发生的变化，如果数据发生变化，就通知侦听器所绑定的方法
侦听器的应用场景: 数据变化时执行异步或开销较大的操作

watch: {
  firstName (val) {
    // val 表示变化之后的值
    this.fullName = val + this.lastName
  },
  lastName () {
    this.fullName = this.firstName + val
  }
}

---

过滤器

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

// 自定义全局过滤器
// val 需要处理的数据
Vue.filter('过滤器名称', function (val) {
  ...
})

// 过滤器的使用
<div>{{mag | upper}}</div>
<div>{{mag | upper | lower}}</div>
<div v-bind:id="id | formatId"></div>

// 局部过滤器写在 Vue 实例中
filters: {
  capitalize (val) {
    ...
  }
}

---

生命周期

生命周期可以理解为一个事物从诞生到消亡的整个过程

主要阶段:

API	说明
创建期	初始化相关属性
beforeCreate	创建前
created	创建完成
挂载期	初始化相关属性
beforeMount	挂载前
mounted	挂载完成
更新期	元素或组件的变更操作
beforeUpdate	更新前
updated	更新完成
销毁期	销毁相关属性
beforeDestroy	销毁前
destroyed	销毁完成

Vue实例的产生过程

1. beforeCreate 是在实例初始化之后，数据观测和事件配置之前被调用
2. created 是在实例创建完成之后被立即调用
3. beforeMount 在挂载开始之前被调用
4. mounted 被新创建的vm.$el替换，并挂载到实例上去之后立即调用
5. beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前
6. updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用
7. beforeDestroy 实例销毁之前调用
8. destroyed 实例销毁后调用

{{ x }} 插值表达式，最好写一个v-cloak