Vue - 简书

watch 和 computed 和 methods 区别

watch：监听，对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。
deep: true :会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
immediate: true：该回调将会在侦听开始之后被立即调用
computed：计算属性，它会根据所依赖的数据动态显示新的计算结果
methods：方法

watch 和 computed：
computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据；调用时不需要加括号。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作。

computed 和 methods
最大区别是 computed 有缓存：如果 computed 属性依赖的属性没有变化，那么 computed 属性就不会重新计算。methods 则是看到一次计算一次, 不是响应式的

Vue生命周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程，在这个过程中也会运行生命周期钩子函数，用户可以在不同阶段添加代码。

beforeCreate：在实例初始化之后
created：在实例创建完成后被立即调用
beforeMount：在挂载开始之前被调用
mounted：实例被挂载后调用
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy：实例销毁之前调用
destroyed：实例销毁后调用

不考虑服务器端渲染，一般在 mounted周期内请求数据

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。

3 种路由模式：hash、history、abstract

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
history: 依赖 HTML5 History API 和服务器配置。利用 history.pushState 和 history.replaceState API 来完成 URL 跳转而无须重新加载页面
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

常用API

跳转

<router-link to=""></router-link>

this.$router.push()    // 通过 $router 访问路由实例

this.$router.replace()   //不会向 history 添加新记录，而是替换掉当前的 history 记录

占位

<router-view></router-view>

动态路由匹配 $route.params

导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

全局前置、解析、后置钩子：beforeEach、beforeResolve、afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

完整的导航解析流程

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由懒加载

import('./Foo.vue') // 返回 Promise

Vue 组件间通信

父子组件：使用 v-on 通过事件通信
爷孙组件：使用两次 v-on 通过爷爷爸爸通信，爸爸儿子通信实现爷孙通信
任意组件：使用 eventBus = new Vue() 来通信，eventBus.$on 和 eventBus.$emit 是主要API
任意组件：使用 Vuex 通信

v-model 原理

使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，根据控件类型自动选取正确的方法来更新元素。v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据。
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

<input v-model="message" placeholder="edit me">
相当于
<input v-bind:value="message" v-on:input="message = $event.target.value">

<p>Message is: {{ message }}</p>

Vue数据响应式

把 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property

使用 Object.defineProperty 把这些属性全部转为 getter/setter
Vue 不能检测到对象属性的添加或删除，解决方法是手动调用 Vue.set 或者 this.$set

Vue.set

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

参数：
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
返回值：设置的值。
用法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

vm.$set( target, propertyName/index, value ):全局 Vue.set 的别名

//Vue 只会检查第一层属性，无法监听一开始不存在的属性
new Vue({
  data: {
    obj: {
      a: 0 // obj.a 会被 Vue 监听 & 代理
    }
  },
  template: `
    <div>
      {{obj.b}}
      <button @click="setB">set b</button>
    </div>
  `,
  methods: {
    setB() {
      this.obj.b = 1; //不会显示 1 
      Vue.set( this.obj, 'b' , 1)
      this.$set( this.obj, 'b', 1)
      console.log(Vue.set === this.$set)  //作用相同
    }
  }
}).$mount("#app");