- 博客(11)
- 收藏
- 关注
RSS订阅原创 Vue中v-for添加key的作用
key值可以用于提高v-for的渲染性能.当数据发生变化的时候,vue会将新的虚拟dom与旧的虚拟dom使用diff算法进行对比。 如果key值不同,vue不复用元素而是就地更新，只有key值相同,vue才会考虑复用，一般开发中key值会优先设置为id ,如果没有id才会设置下标, 因为默认key就是下标,当数组长度发生变化的时候, 下标也会变化, 就会导致key值也发生变化, 就不会复用
2023-02-07 06:30:57
342
原创 Vue中计算属性和侦听器的区别
功能：计算属性是用来解决模板语法冗余的, 侦听器是用来侦听data中某一数据的变化(功能不同)1. 计算属性有缓存机制, 侦听器没有2. 计算属性不支持异步操作, 侦听器支持3. 计算属性可以给vue新增属性, 侦听器必须是data中已有的属性4. (可选)计算属性只要使用了就会立即执行一次, 侦听器默认只有当数据第一次改变才会执行, 需要设置immediate属性来控制是否立即执行一次
2023-02-07 06:28:25
828
原创 Vue中的计算属性详解
a. 计算属性本质是一个函数b. 计算属性的值就是函数的返回值c. 缓存机制（提高性能） （1）计算属性在第一次使用时，会执行一次函数体，之后就会将返回值缓存起来 （2）下一次使用计算属性的时候，不会执行这个函数，而是直接从缓存中读取 （3）只有当计算属性中的数据发生变化时，这个函数才会重新执行一次
2023-02-07 06:26:28
220
原创 数据变化，Vue如何更新视图
(1)根据变化后的数据，生成新的虚拟DOM(2)新旧VNode使用diff算法进行对比 如果key值不同，vue则会更新元素 如果key值相同，则会考虑复用.(key值一样，继续看标签是否一样, 继续看类名是否一样)(3)复用相同的内容，更新不同的内容（打补丁） (4)渲染更新之后的虚拟DOM
2023-02-07 06:23:35
781
原创 Vuex的触发流程
点击按钮的时候，通过dispatch触发actions，actions中发请求，请求的结果到达之后，通过commit触发mutations，并且对mutaions的每一次触发都可以通过devtools来观测到。在mutations中修改state之后，由于state中的数据是响应式的，所以凡是用到state数据的组件都会自动更新。如果不涉及到异步操作，也可以直接在视图中直接commit触发mutaion来修改state
2023-02-07 06:20:22
128
原创 Vue中v-if和v-show的区别
共同点：都是条件渲染不同点： v-if本质其实是动态的创建 或者 删除元素节点。一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。 因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。 v-show本质是在控制元素的 css 样式,display: none; 一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。
2023-02-07 06:16:29
132
原创 Vue中data为什么是函数返回对象的形式？
因为组件是需要复用的,如果组件的data是一个对象,那么组件在复用的时候就会使用相同的对象地址, 一旦这一个地方被修改,其他的也会跟着修改. 如果组件data是一个函数, 组件在每一次复用的时候就会调用这个函数得到一个全新的对象, 这样就可以做到在复用的时候每个组件之间的数据都是独立的, 互不影响.
2023-02-07 06:13:46
1433
原创 Vue中单向数据流
js值类型赋值, 拷贝的是数据.修改拷贝后的数据, 对原数据没有影响,这样会导致子组件和父组件的数据不一致,对开发会有影响js引用类型赋值就不会有单向数据流, 拷贝的是地址,修改拷贝后的数据, 原数据也会改变
2023-02-07 06:09:46
100
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人