vue2.x

目录

vue-router   路由管理

vuex 状态管理

转义(渲染)细节

安全问题

html 注入

js 注入

style 注入

url  注入

服务端安全管理

vue 非响应数据 ->vue 响应数据

异步更新队列

---

 

vue-router   路由管理

const jbzhList = () => import('../views/phjrstbt/system/qypz/main.vue')

 

vuex 状态管理

vue 共享唯一数据源

子组件们的每个实例也会通过 this.$root.$data

状态管理问题

转义(渲染)细节

<script>alert("hi")</script>
" onclick="alert('hi')

安全问题

html 注入

js 注入

style 注入

推荐只允许在一个 iframe 沙盒内进行 CSS 的完全控制

推荐使用其对象语法且只允许用户提供特定的可以安全控制的 property 的值

url  注入

前后端进行url  过滤

对于被过滤过的 URL，Vue 仍无法帮助你保证它们会跳转到安全的目的地

 

服务端安全管理

后端协助

服务端渲染 (SSR)

vue 非响应数据 ->vue 响应数据

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

// vm.$set 实例方法，这也是全局 Vue.set 方法的别名
this.$set(this.someObject,'b',2)

对象赋值时响应式数据问题

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

 

异步更新队列

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

同一个 watcher 被多次触发，只会被推入到队列中一次，所以在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

在组件内使用 vm.$nextTick() 实例方法特别方便可以清空缓存

setTimeout(fn, 0)//Promise.then()  等原生js方法处理