Vue 速记

2020-02-27 本文已影响0人滑天下之大稽

响应原理

vue 采用水街吃结合 ‘发布者-订阅者模式’ 的方式，通过 Object.defineProperty 劫持 data 属性的 getter、setter 在数据变动的时候发布给订阅者，触发响应的监听回调。

生命周期函数

beforeCreate：vue 实例的挂载元素 $el 和数据对象 data 都是 undefined
created：完成了 data 数据初始化，$el 还未初始化
breforeMount：vue 实例的 $el 和 data 都初始化了，相关的 render 函数首次被调用
mounted：此过程中进行 ajax 交互
beforeUpdate
updated
beforeDestroy
destroyed

组件data为什么返回函数

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

vue 给对象新增属性

由于Vue会在初始化实例时对属性执行getter/setter转化，所以属性必须在data对象上存在才能让Vue将它转换为响应式的。Vue提供了$set方法用来触发视图更新。

v-model 双向绑定原理

text 和 textarea 元素使用 value 属性和 input 事件
checkbox 和 radio 元素使用 checked 属性和 change 事件
select 字段使用 value 属性和 change 事件

<input v-model="sth" />
<input :value="sth" @input="sth=$event.target.value">

key 的作用

让 vue 精准的追踪每一个元素，搞笑的跟新虚拟 DOM。
触发过度

<transition>
    <span :key="text">{{ text }}</span>
</transition>

当 text 改变时，这个元素的 key 就发生改变，Vue会认为这里新产生了一个元素，而老的元素由于key不存在了，所以会被删除，从而触发了过渡。

ref 的作用

获取 dom 元素： this.$refs.box
获取子组件中的 data：this.$refs.box.msg
调用子组件中的方法：this.$refs.box.open()

组件通信

父组件给子组件传值通过 props
子组件给父组件传值通过 $emit 触发回调
兄弟组件通信，通过实例化一个 vue 实例作为 eventBus，要相互通信的兄弟组件之中，都引入eventBus。

//main.js
import Vue from 'vue'
export const eventBus = new Vue()

//brother1.vue
import eventBus from '@/main.js'
export default{
    methods: {
        toBus () {
            eventBus.$emit('greet', 'hi brother')
        }
    }
}

//brother2
import eventBus from '@/main.js'
export default{
    mounted(){
        eventBus.$on('greet', (msg)=>{
            this.msg = msg
        })
    }
}

axis 拦截器配置

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求前做些什么
    return config
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
     // 对响应数据做点什么
    return response
}, function (error) {
    // 对响应错误做些什么
    return Promise.reject(error)
})