Vue的两大核心 |
您所在的位置：网站首页 › vue中的data为什么是函数 › Vue的两大核心 |
|
vue的两大核心：
一.数据驱动
数据驱动也就是数据双向绑定 vue响应式核心就是，getter的时候会收集依赖，setter的时候会触发依赖更新 vue将遍历data中对象的所有property，并使用Object.defineProperty把这些property全部转换为getter/setter 这些getter/setter对用户来说是不可见的，但是在内部他们让vue能够追踪依赖，在property北方为和修改时通知变更 每个组件实例都对应一个watcher实例，他会在组件渲染的过程中把接触的数据property记录为依赖 getter的时候我们会手机依赖，依赖收集就是订阅数据变化的watcher的手机，依赖收集的目的就是当响应式数据发生变化时，能通知响应的订阅者去处理相关的逻辑 setter的时候会触发依赖更新，之后当依赖项的setter触发时，会通知watcher，从而使他关联的组件重新渲染 二.组件系统 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系 初始数据（data）：一个组件的初始数据状态，对于可复用的组件来说，这通常是私有的状态 接受的外部参数（props）:组件之间通过参数来进行数据的传递和共享 方法（methods）：对数据的改动操作一般都在组件的方法内进行 生命周期钩子函数（lifecycle hooks）:一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期名称改动很大 私有资源（assets）:Vue.js当中将用户自定义的指令，过滤器，组件等统称为资源，一个组件可以声明自己的私有资源，私有资源只有该组件和他的子组件可以调用 对于MVVM的理解MVVM表示的是Model-View-ViewModel Model：代表数据模型 负责处理业务逻辑以及和服务器进行交互 View：代表UI组件 负责将数据模型转化为UI显示出来，简单理解为HTML页面 ViewModel：就是将Model和View关联起来 数据会绑定到ViewModel层并自动将数据渲染到页面中，试图变化的时候会通知ViewModel层更新数据 Vue2.响应式数据/双向数据绑定Vue数据双向数据绑定主要是指：数据变化更新视图，视图变化更新数据。其中View变化更新Data，可以通过事件监听的方式来实现，所以Vue数据双向绑定的工作主要是如何根据Data变化更新View 简述： 当你把一个普通的JavaScript对象传入Vue实例作为data选项，Vue将遍历此对象所有的property，并使用Object.defineProperty把这些property全部转为getter/setter 这些getter/setter对用户来说是不可见的，但是在内部他们让Vue能够追踪依赖，在property被访问和修改时通知变更 每隔足见实力都对应一个watcher实例，他会在组件渲染的过程中把接触过的数据property记录为依赖，之后当依赖的setter触发时，会通知watcher，从而使他关联的组件重新渲染 Vue3.x响应式数据原理Vue3.x改用proxy替代Object.definProperty 因为proxy可以直接监听对象和数组的变化，并且有多大13种拦截方法，并且作为新标准将收到浏览器肠商持续的性能优化 proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？ 判断当前Reflet.get的返回值是否是Object，如果是则再通过recative方法做代理，这样就实现了深度观测 我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger computed和watch的区别和运用的场景？ computed：是计算属性，依赖其他属性值，并且computed的值有缓存，只有它依赖的属性值发生改变？下一次获取computed的值才会重新计算computed的值 watch：没有缓存性，更多的是观察的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听 3. 运用场景 当我们需要进行数值计算，并且依赖于其他数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次获取值时，都要重新计算 当我们需要在数据变换时执行异步或开销大的操作时，应该使用watch，都是watch选项允许我们执行异步操作（访问一个API）限制我们执行该操作的评率，并在我们得到最终结果钱，设置中间状态。这些都是计算属性无法做到的 说一下v-if和v-show的区别 当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式（display），切换当前DOM的显示和隐藏 v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景 v-show则使用于需要非常频繁切换条件的场景 为什么v-for和v-if不建议用在一起 当v-for和v-if处于同一节点时，v-for的优先级比v-if高 这意味着v-if将分别重复运用于每个v-for循环中，如果药便利的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费 这种场景建议使用computed 先对数据进行过滤 组件中的data为什么是一个函数 一个组件被复用多次的话，也会创建多个实例。本质上，这些实例用的都是同一个构造函数 如果data是对象的话，对象属于引用类型，会影响到所有的实例，所以为了保证组件不同的实例之间的data不冲突，data必须是一个函数 子组件为什么不可以修改父组件传递的prop？怎么理解vue的单项数据？ Vue提倡单项数据流，即父级props的更新会流向子组件，但是反过来则不行 这是为了防止意外的改变父组件组件状态，使得应用的数据流变得难以理解 如果破坏了单项数据流，当应用复杂时，debug的成本会非常高 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |