vue2响应式的缺点影响

2024-10-02 14:21:58

前言：

响应式：数据改变-->视图跟着变

对象新增的属性没有响应式数组的部分操作没有响应式

push()，pop()，shift()，unshift()，splice()，sort()，reverse()

以上7中API会修改原数组(vue2的内部重写了这7个API)

其他的操作都不会有响应式

实际简单操作一波：

<template>
  <div>
<span v-for="(item,index) in arr " :key="index">{{item}}</span>
<hr>
<button @click="arr[0]=100">点击把第一个元素变成100</button>
  </div>
</template>
<script>
export default {
data() {
    return {
        arr:[1,2,3]
    }
},
}
</script>
<style>
span{
    margin: 10px;
    background-color: orange;
    padding: 10px;
    border-radius: 5px;
} button{
    background-color: orange;
    font-size: 20px;
    border: 0;
    cursor:pointer;

}
</style>

你们会发现vue里面的数据其实已经改成100了,但是页面并没有渲染出来.

现在我们换一种,换成splice来操作：

<template>
  <div>
<span v-for="(item,index) in arr " :key="index">{{item}}</span>
<hr>
<button @click="arr.splice(0,1,100)">点击把第一个元素变成100</button>
  </div>
</template>
<script>
export default {
data() {
    return {
        arr:[1,2,3]
    }
},
}
</script>
<style>
span{
    margin: 10px;
    background-color: orange;
    padding: 10px;
    border-radius: 5px;
} button{
    background-color: orange;
    font-size: 20px;
    border: 0;
    cursor:pointer;

}
</style>

数据修改的同时,dom也成功渲染

到此这篇关于vue2响应式的缺点影响的文章就介绍到这了,更多相关vue2响应式缺点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue2 响应式系统之数组

目录 1.场景 2.场景 2 3.方案 3.收集依赖代码实现 4.通知依赖代码实现 5.测试 6.总结本文接Vue2响应式系统.Vue2 响应式系统之分支切换 ,响应式系统之嵌套.响应式系统之深度响应还没有看过的小伙伴需要看一下. 1.场景 import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { list: ["hello"],
Vue2 响应式系统之异步队列

目录场景解决方案代码实现执行结果总结试想一下如果这里的 console.log 是渲染页面,那改变一次值就刷新一下页面,会造成严重的性能问题,页面也会不停的改变. 场景 import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { a: 1, b: 2, c: 3, }; observe(data); const updateComponent
Vue2响应式系统之嵌套

目录 1.场景 2.执行过程 3.修复 4.测试 5.总结 1.场景在开发中肯定存在组件嵌套组件的情况,类似于下边的样子.Vue  <div> <my-component :text="inner"></my-component> {{ text }} <div>  <div>{{ text }}</di
Vue2 响应式系统之深度响应

目录 1.场景 2.方案 3.场景2 4.总结 1.场景 import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { text: { innerText: { childText: "hello", }, }, }; observe(data); const updateComponent = () => { console.lo
Vue2 响应式系统之分支切换

目录场景 observer(data) new Watcher(updateComponent) data.ok = false data.text = "hello, liang" 问题去重重置测试总结场景我们考虑一下下边的代码会输出什么. import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { text: &quo
Vue2响应式系统介绍

目录一.响应式系统要干什么二.响应式数据三.保存当前正在执行的函数四.响应式数据五.Observer 对象六.测试七.总结前言: 目前工作中大概有的需求是在用的技术栈,所谓知其然更要知其所以然,为了更好的使用 .更快的排查问题,最近学习了源码相关的一些知识,虽然网上总结的很多很多了,不少自己一个,但也不多自己一个,欢迎一起讨论学习,发现问题欢迎指出.40%Vue2VueVue 一.响应式系统要干什么回到最简单的代码: data = { text: 'hello, worl
Vue2.x响应式简单讲解及示例

一.回顾Vue响应式用法 vue响应式,我们都很熟悉了.当我们修改vue中data对象中的属性时,页面中引用该属性的地方就会发生相应的改变.避免了我们再去操作dom,进行数据绑定. 二.Vue响应式实现分析对于vue的响应式原理,官网上给了出文字描述 https://cn.vuejs.org/v2/guide/reactivity.html . vue内部主要是通过数据劫持和观察者模式实现的数据劫持: vue2.x内部使用Object.defineProperty https://dev
Vue2响应式系统之set和delete

目录 1.数组集 2.数组 del 3.对象 set 4.对象 del 5.总结 1.数组集 import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { list: [1, 2], }; observe(data); const updateComponent = () => { console.log(data.list); }; new Watc
vue2响应式的缺点影响

前言: 响应式:数据改变-->视图跟着变对象新增的属性没有响应式数组的部分操作没有响应式 push(),pop(),shift(),unshift(),splice(),sort(),reverse() 以上7中API会修改原数组(vue2的内部重写了这7个API) 其他的操作都不会有响应式实际简单操作一波: <template> <div> <span v-for="(item,index) in arr " :key="index
关于vue2响应式缺陷的问题

目录 vue2响应式缺陷 1.对象新增的属性没有响应式 2.数组的部分操作没有响应式 vue2与vue3的响应式原理 vue2响应式 vue3响应式雏形 vue3的响应式相较于vue2的优势 vue2响应式缺陷响应式 : 数据改变 ==> 视图跟着改变 vue2响应式缺陷 1.对象新增的属性没有响应式对象,新增属性b,修改b的值,值改变但视图并未更新解决方案 : 使用vue提供的 api $set(对象,属性名,值) 效果如属性c 2.数组的部分操作没有响应式数组中有7种操作有响应式 a
vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况

目录 vue2响应式双向绑定,在对象或数组新增属性页面无响应问题描述解决方法 vue2实现响应式数据 JS中的对象属性利用Object.defineProperty()进行数据劫持与标签联动 v-model的实现总结 vue2响应式双向绑定,在对象或数组新增属性页面无响应问题描述 vue2 中可以将数据与视图进行绑定,修改 data 对象的属性值将引起对应视图的改变. Vue2的数据视图绑定是通过JS特性这一语法实现,其使用中存在数据属性丢失的这一 bug,主要针对对象或数组属

vue2响应式的缺点影响

相关推荐

随机推荐