vue xss 存在_vue一些笔记

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会造成内部的子元素都被替换掉。

vue是渐进式框架：

你可以只用做模板引擎，或者加上vue提供的路由，或者加上全局状态管理vuex，或者直接使用vue-cli直接搭建项目。你可以在现有程序使用vue，也可以用vue搭建工程。

vue核心是响应式：

通过对data数据变更实现页面更新。

vue的mvvm理解：

view视图层，viewModel是vue的实例，也就是vm(new Vue)，model数据，也就是vue里面的data。

vue响应式原理：

vue通过发布订阅和数据劫持的方法对数据进行监听，会给每个默认属性进行监听，深层次的也会递归进行监听，会对改变原数组的数组方法进行函数劫持。因为要对数据进行递归监听，这也是vue性能的一个痛点。到了vue3用proxy进行重写，不需要递归监听，但是proxy兼容性不好。

vue数据不更新到页面：

之前分享过vue数据不更新渲染，其实是错的，vue只能监听默认的属性，数组的索引发生变化或者改变数组长度也不会触发更新。比如你在data定义一个obj: {}，然后在其它地方给obj定义一个属性，或者你定义一个数组arr,，然后直接arr[0]赋值，这些都不会进行监听，但是数据是变化的。有可能通过这两个方法页面发生变化了，那是因为有其它监听的数据发生变化，页面重新渲染，会顺带帮你把数据渲染到页面。使用$set可以监听或者$ForceUpdate会强制渲染。

vue中render、template、el：

vue中如果render、template、el都存在的情况下，render优先级最高，接着是template，最后是el:

var vm = new Vue({

  render: function(h){

    return h('div', {}, '这是render属性方式渲染。')

  },

  template: '<div>这是template属性模板渲染。</div>',

  el: '#app',

});

vue中提供的template：

vue提供的template是无意义的，具有隐藏性、无效性、任意性，如果你用v-if的时候，使用template包裹，渲染的时候template会不存在。v-show不能用在template上。循环的key也不能放在template上。

v-if、v-show、v-for：

v-if是控制dom是否存在，v-show是控制样式display，v-if会重新渲染元素或者组件，并且重新执行涉及的函数。v-for的优先级高于v-if，性能会差一些，所以尽量不要一起使用。

v-model其实是语法糖：

v-model其实是:value和@input方法的语法糖，下面两个等价：

<input type="text" :value="msg" @input="(e) => msg = e.target.value">

<input v-model="msg">

vue组件核心：

组件的优点很多，重用、易维护、解耦等，vue中组件还有一个核心的优点，就是组件级更新，因为每个组件都有自己一个watcher，数据更新了只是重新渲染自己组件，而不会是整个页面。

.vue文件

.vue的script中的export default出去的对象，相当于Vue.extends({})里面的这个对象。import .vue文件，获取的是一个对象，可以打印看看，里面有render函数等。

$bus：

给vue挂一个new Vue，因为每个vue实例都有$on、$emit、$off的事件，用来任意组件监听、通信，但是无法控制监听命名重复，不适合大规模使用，而且必须先监听再发布：

Vue.prototype.$bus = new Vue();

this.$once('hook:beforeDestroy', function () { picker.destroy() }); Vue3.0确实是新增了hook，有点靠近了react，但是这个是很早之前就出的，很奇怪，为什么没多少有介绍到。最简单的使用场景就是监听滚动或者计时器在组件销毁的时候清除，这段代码相当于在组件销毁的时候执行picker.destroy()，在vue官网/教程/深入了解组件/处理边界情况/程序化的事件监听器可以看看API。

@hook:

说实在的，这个语法我中文文档和英文文档都查了很久，没发现API有这个语法，但是确实是能实现，就是监听外部组件的生命周期

当子组件执行mounted的时候，父组件就会执行childrenMounted方法，这在一定场景应该是有用的。

.sync修饰符：

之前就说过v-model是一个双向绑定的语法糖，vue还提供了.sync这个修饰符对一个props进行双向绑定，其实就是v-bind和v-on的语法糖，某些场景比使用props传递更理想。

Component动态组件：

前几天才觉得react可以把组件当作参数传递非常神奇，想想之前在做页面内tab切换的时候，一堆的v-if去判断，其实直接使用内置的动态组件更省事，以前知道这个，但是居然没有在项目中使用：

Object.freeze()：

Vue会递归监听data里面所有的对象，这是性能痛点之一，而这个方法，可以冻结一个对象，如果在vue里面声明的数据只是第一次渲染使用，可以直接冻结，不进行监听，如果你想重新进行监听可以直接赋值也是可以的，这方法也可以作为一个长列表性能优化使用：

data里面定义：

obj1: Object.freeze({a:1}),

obj2: {b: 2}



mounted(){

  console.log(this.obj1)

  console.log(this.obj2)

}

输出：

HTTP协议通信最耗费时间的是建立TCP连接的过程，那我们就可以使用HTTP Keep-Alive。但是，keep-alive长时间的TCP连接容易导致系统资源无效占用。配置不当的keep-alive，有时比重复利用连接带来的损失还更大。所以正确地设置keep-alive timeout时间非常重要。浏览器对于TCP的keep-alive有连接限制4-6个。

减少HTTP请求次数将多个文件压缩打包成一个，当然也不能都放在一个文件中，因为这样传输起来可能会很慢，权衡取一个中间值。配置使用懒加载，对于一些用户不立刻使用到的文件到特定的事件触发再请求，服务器资源的部署尽量使用同源策略。服务端最好开启gzip。

JSX 语法：

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，允许 HTML 与 JavaScript 的混写HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。原谅我之前并不能解释jsx语法。