晚上闲来无事 复习了下一些基础Vue原理 纯手敲 贵在理解记忆
-
- 1.简单高效易上手
- 2.虚拟dom 更新快 易开发
- 3.双向绑定 响应式数据更新 开发效率高
- 4.基于组件的代码共享
- 5.web项目工程化 可读性高 可维护性高
- 双向绑定原理
- Vue2：使用Object.defineProperty，Obsever类来拦截每个数据，递归每个数据到最低层 为每个属性添加getter和setter 当数据进行读取时 触发getter 每个数据的Dep类收集依赖 也就是当前数据的Watcher类，当数据发生改变时 触发setter 所有的对应的依赖Watcher 进行数据改变 重新加载视图。
- 缺点：1.不适合监听数组下标，因为数组的属性l ength比较特殊，如果数组过大 监听起来非常消耗性能，当数组直接通过索引去修改数据，或者用数组的变异方法去直接操作数组本身 Vue是监听不到数组的变化的，为此 Vue重写了数组的变异方法 来解决这个问题。2.Object.defineProperty只能监听数据初始化属性 后续添加或删除的时候 需要手动使用this.set和this.delete去更改数据更新视图 这时候也为该数据绑定了getter和setter 保持后续的响应性。
- Vue3：使用Proxy 无需递归遍历到最低层为数据的每个属性添加getter和setter Proxy是自动拦截数据属性的 当数据发生变化 重新渲染视图 他和Object.defineProperty的核心原理是相似的，区别是没有显式的调用Obsever Dep Watcher这三个类 是自动的去进行依赖收集和视图更新
- 为什么放弃使用Object.defineProperty 而去使用Proxy：
- 1.Object.defineProperty不适合监听数组下标 消耗性能过大
- 2.Object.defineProperty递归遍历太深，如果对象的属性也是对象 要一直遍历到最低层，消耗性能，而Proxy直接代理对象 不需要递归遍历
- 3.Object.defineProperty后续新增或删除 要手动调用实例的set和delete方法
- 4.Proxy也支持多种拦截方式 而Object.defineProperty拦截方式太过麻烦
- 5.Proxy未来发展性也是比较可观的
- Vue2当data()函数内的对象新增或删除属性时 会发生什么 如何解决
- 因为Vue2响应式系统使用的Object.defineProperty 只会监听初始化数据 所以后续新增或删除属性 视图是没有更新变化的 这时候需要使用Vue实例的全局api $set 来添加新属性 以达到更新数据 视图更新 同时添加getter和setter 以确保后续响应式更新
- Vue2为什么data是函数 而不是对象
- 因为当父组件内有多个子组件时 为防止数据互相污染影响 所以data必须是函数 作用域有隔离 如果是对象 作用域是没有隔离的
- computed和methods的区别
- computed是依赖于其他属性获得结果 是有缓存的 依赖的数据没有发生变化时 computed是不会触发的 并且computed触发是自动的 而methods内的函数需要主动调用触发
- computed和watch的区别
- computed是不可以异步的 因为computed的定义是 依赖数据发生变化 立刻触发 如果内部包含异步操作 就违背了初始定义 其次computed是依赖多个属性 获得一个数据
watch可以进行更复杂的操作 可以进行异步任务 并且是监听一处数据 改变多处数据
- 关于Vue实例中的filter 它是一个在展示层中格式化数据的工具 例如computed是数据层 methods是逻辑层 而filter是展示层用来编写一些格式化数据的api的源码
