sky89299的博客

1. 两者对比，不难看出，两者的数据劫持都用到了set和get的方法，但是明显可以看出来，Proxy中的数据劫持，并没有用到循环，也就是性能上面的一个提升。 2. Proxy中他劫持的是整个对象，包含了后面新增的一些属性，也能够实现数据的响应式变化，而Object.defineProperty是通过循环遍历的原来对象的键，因此后面加进来的属性，无法实现响应式的变化。...

对数组变成树状结构一般的应用场景非常的广泛，有后台权限的管理，侧边栏的渲染等，相信大家对数组变成树状结构一定不陌生，大家一般工作中经常会遇到，运气好点的，后台已经帮你处理好了数据，得到的就是帮你处理好了的数据，不好的，那就需要自己手动处理下数据了。今天就和大家详细解析下如何高效的把数组变成树状结构。

## Vuex介绍 1. 作用：能够`方便、高效地`实现组件之间的`数据共享 2. Vuex是什么？ Vuex是vue项目中实现`大范围数据共享`的技术方案 3. 优势： 1. 数据的`存取一步到位`，不需要层层传递 2. 数据的`流动`非常清晰 3. 存储在Vuex中的数据都是`响应式`的 4. 场景： 1. 适合频繁、大范围的数据共享

Vuex介绍 1. 作用：能够`方便、高效地`实现组件之间的`数据共享 2. Vue是什么？ Vuex是vue项目中实现`大范围数据共享`的技术方案 3. 优势： 1. 数据的`存取一步到位`，不需要层层传递 2. 数据的`流动`非常清晰 3. 存储在Vuex中的数据都是`响应式`的 4. 场景： 1. 适合频繁、大范围的数据共享

Vue路由-全局前置守卫 1. 作用：路由跳转之前，会触发一个函数。 2. 场景：检验是否登录，没登录就跳转到登录页，主要用于权限控制。 3. 语法： `router.beforeEach((to,form,next)=>{})`（在main.js中） 参数一（to）：到哪里去 参数二（from）：从哪里来 参数三（next）：是否放行，也可以控制跳转的路径 `next(false)` 拦截,不允许跳转 `next()`不拦截，跳转 `next

路由嵌套之后，他的class有两种，可以分为 - 精确匹配 router-link-exact-active url中hash值路径。与href属性值完全相同，设置此类名。 - 模糊匹配 router-link-active url中hash值 包括href属性值这个路径

路由 1. 路由含义：路径和组件的映射关系 2. 前端路由作用：实现业务场景切换 ，所有的业务都在一个HTML中实现 1. 优点： - 整体`不刷新页面`用户体验更好

作用域插槽 0. 作用：使用组件时，可以访问组件内部的数据 0. 语法： - 子组件插槽slot上绑定一个数据 - 父组件插槽接收，scope是自定义变量名 - 父组件会将插槽上绑

组件-插槽 插槽 作用：通过slot标签，让组件可以接收不同的标签结构显示 语法 组件内用<slot></slot>占位 使用组件时<Pannel></Pannel>夹着的地方，传入标签替换slot ## 插槽-默认内容 0. 作用： 如果外面没有传值，可以给个默认显示内容 0. 语法：<slot>放置内容，作为默认显示内容 0. 效果： - 不给组件传标签，slot内容原地显示 - 给组件内传标

## 生命周期 1. 含义：组件从`创建`到`销毁`的整个过程，这个过程就是声明周期 2. 如何知道组件到了什么阶段？（钩子函数） ## 钩子函数 1. Vue框架`内置`函数，随着组件的声明周期阶段，`自动执行` 2. 作用：在特定的时间点，执行特定的操作 3. 分类4大阶段8个方法 | **阶段** | **方法名** | **方法名** | | -------- | ------------------------- | ----------

侦听器-watch 1. 作用：可以侦听data/compute属性值的变化，只要修改了就会触发函数执行,可以侦听Vue的变量 2. 语法：watch:{}和data(){并齐同级 3. 事例： ```vue watch:{ "要侦听的属性名"（newval，oldval）{//newval是现在的值 oldval是之前的值 } } ``` 4. ==侦听器深度侦听（侦听对象）== 事例： ```vue wat

## v-for 0. 作用： 列表渲染，所在标签结构，按照数据数量，循环生成。指令写在谁身上，就循环创建谁 0. 语法： `v-for = "(值变量，索引变量) in 目标结构" ：key = 索引变量` `v-for = "值变量 in 目标结构 ：key = 索引变量"` 目标结构：可以是数组，对象，字符串 0. 数组方法如果修改了原数据就会更新 页面，如果没有修改，则不会，但可以重新赋值给变量让你页面更新 0. v-for中的key作用：在更新的时候

v-model和修饰符 1. 作用：value属性和vue数据变量，双向绑定到一起 2. `双向绑定：` - 变量变化-->视图自动同步 - 视图变化-->变量自动同步 3. 主要用途：表单中 4. 应用场景： - 全选反选功能（非数组） - 考试系统（数组） - 手机用户信息：爱好 是否有以下XXX （数组） 5. select标签上：需要将v-model写在select上，里面的option里的value中需要设置 复选框（checkbox）

Vue 含义：Vue是一个渐进式（按需，逐渐集成功能）Javascript框架 框架：拥有自己的语法规则 库：是方法和集合的集合 Vue脚手架 脚手架启动： 打开cmd运行yarn，下载全局安装@vue/cli模块包yarn global add @vue/cli 查看Vue命令版本vue -V出现版本号，则代表安装成功 创建项目：vue create vuecli-deno 注意：项目名不能带大写字母，中文和特殊符号 选择模板，使用上下箭头选择，回车确认，弄错了ctrl+c退出重来 [外链图片