vue一些笔记20200603

vuex action：

尤雨溪在知乎回答了，区分 actions 和 mutations 并不是为了解决竞态问题，vuex 真正限制你的只有 mutation 必须是同步的这一点，只是为了devtools追踪状态变化，或者说出于单一职责原则。https://www.zhihu.com/question/48759748/answer/112823337

vue事件绑定：

vue的事件绑定，直接绑定给当前元素，打印$event中的target和currentTarget会发现两个是同一个元素，而且是原生事件，用的是addEventListener。methods里面的this指向当前实例，内部用了bind方法，再去绑定this不生效。

vue.use()：

vue.ues方法会执行这个插件的instll方法，默认传入vue，这样主要是为了可以让这个插件使用项目使用的vue，而不是自己引入导致vue版本不一致，导致出现一些无法预估的错误。

父子组件生命周期：

父组件执行到beforeMount之后，子组件先执行直到mounted，之后父组件才执行mounted。销毁父组件beforeDestroy，之后子组件销毁父组件才执行destroyed。

路由:

router-link、router-view这两个组件其实就是用Vue.component注册的全局组件。且内部用mixin让每个子组件都获取router实例。

数组函数劫持：

Vue重写了数组的七个会改变原数组的方法，用函数劫持的方法实现的，类似下面：

let oldArrayMethods = Array.prototype;
let arrayMethods = Object.create(Array.prototype);
let arrayPatch = ['push', 'pop', 'unshift', 'shift', 'splice', 'sort', 'reverse'];
arrayPatch.forEach(method => {
    arrayMethods[method] = function (...args) {
        console.log('调用了' + method);
        return oldArrayMethods[method].apply(this, args);
    }
})
Array.prototype = arrayMethods;
let arr = [1, 2, 3];
arr.push(4)
console.log(arr);

Vue的nextTick:

Vue 提供的nextTick能保证是在DOM渲染之后执行，主要是内部在调用这个之前会在试图渲染方法执行之后调用，内部会通过判断兼容使用微任务还是宏任务，所以要注意不能把这个nextTick跟微任务process.nextTick混淆。

请求放在生命周期哪个合适：

很多请求会放在created里面，这时候操作dom会失败，因为请求是异步的，一般也不会出现问题，但是建议统一放mounted，主要是这时候dom也就渲染了。而服务的渲染不支持mounted方法，统一放created中。

v-html：

v-html会造成XSS攻击，使用的时候必须确保内容是可信的，而且v-html会造成内部的子元素都被替换掉。