话不多说，直接上代码！！！

1. 当数据属于基本类型时， vue会自动检测并在页面重新渲染

 <div id="app"><p>{{ testData }} </p></div><script src="./vue-2.6.12.js"></script><script>let vm = new Vue({el:'#app',data(){return {testData:'嘻嘻哈哈'}}})// 修改data里面的数据let num= 123vm.testData += numconsole.log(vm.testData);</script>

页面展示效果：

控制台输出：

2. 如果数据是引用类型，数据改变无法引起页面重新渲染

2.1 如果数据是数组

 <div id="app"><h2>{{ list }} </h2></div><script src="./vue-2.6.12.js"></script><script>let vm = new Vue({el:'#app',data(){return {list:[1,2,3,4]}}})// 修改data里面的数据let num = Math.round( Math.random()*10)vm.list.length = numconsole.log('修改后的引用类型数据:',vm.list)</script>

页面效果 :

控制台打印效果 :

2.1.1 解决方法

1. 合并数组到一个新的数组中

vm.list = [...vm.list,num]

2. Vue对数组变更的一些方法进行了封装

push()、pop()、shift()、unshift()、splice()、sort()、reverse() , 使用这些方法,可以直接出发视图重新渲染

2.2 如果数据是对象类型

 <div id="app"><h2>{{ obj }} </h2><button @click="addFn">新增</button></div><script src="./vue-2.6.12.js"></script><script>let vm = new Vue({el:'#app',data(){return {obj:{name:'zs',age:22   }}},methods: {addFn(){this.obj.sex = '男'console.log('修改后的对象类型数据:',this.obj)}},})</script>

页面效果：

控制台打印：

2.2.1 解决方法

使用Vue的 set 方法

代码实现

this.$set(this.obj,'sex','男')
//参数1： 要修改的对象
//参数2： 属性
//参数3： 属性的值是啥
//返回值：已经修改好的值{ "name": "zs", "age": 22, "sex": "nan" }

Vue中data数据变化 -- 页面重新渲染的问题相关推荐

vue中data数据之间如何赋值
vue中data数据之间如何赋值前言实现方式前言最近我妹突然问我vue的data之间需要进行赋值,这是什么奇葩需求,干嘛不直接自己定义好就好了啊,既然有这种场景,那么我们就需要去解决这种场景. ...
vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
原生JS实现vue中data值的修改与渲染
前言砖搬多了就得想想怎么造砖,Vue使用多了,也得想想Vue是咋实现,Vue用着确实舒服,仔细了解一下,背后做的操作也太多了吧,但是再多的操作也是一个一个积累起来的吧! 先记录一下怎么实现data中 ...
vuex中的值变化页面重新渲染_浅谈浏览器的渲染过程，重绘与回流
浏览器的渲染过程首先,我们先来了解一下浏览器的渲染过程是什么样的,也就是说浏览器把一堆代码呈现到页面上的过程是什么样子的,浏览器采用流式布局模型(Flow Bsaed Layout),根据下图,我们 ...
vue中data数据之间的调用
场景:多个options的选项一致,想抽取出一个公用的,其他的直接用这个就可以 topicList: [{name: '1.您认为正确吗?',isSingle: true,options: this. ...
vue中组件在不同页面中渲染出错
vue中组件在不同页面中渲染出错封装了一个组件封装了一个组件遇到问题了,特向各位大佬请教比如我封装了一个 child 组件我在father 页面中引入可以正常使用而且css 样式不会出现 ...
Vue中的数据代理与数据劫持
数据代理数据代理字面上是通过一个对象代理对另一个对象属性的操作在vue中的数据代理,实际上是通过vm上的属性代理对_data中属性的操作数据劫持数据劫持也可称作数据代理,字面上是劫持到某个属性 ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
微信小程序引用php函数,微信小程序Page中data数据操作和函数调用详细介绍
这篇文章主要介绍了微信小程序详解Page中data数据操作和函数调用的相关资料,需要的朋友可以参考下微信小程序详解Page中data数据操作和函数调用 Page() 函数用来注册一个页面.接受一 ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...

Vue中data数据变化 -- 页面重新渲染的问题

1. 当数据属于基本类型时， vue会自动检测并在页面重新渲染

2. 如果数据是引用类型，数据改变无法引起页面重新渲染

2.1 如果数据是数组

2.1.1 解决方法

1. 合并数组到一个新的数组中

2. Vue对数组变更的一些方法进行了封装

2.2 如果数据是对象类型

2.2.1 解决方法

Vue中data数据变化 -- 页面重新渲染的问题相关推荐

最新文章

热门文章

Vue中data数据变化 -- 页面重新渲染的问题

1. 当数据属于基本类型时 ， vue会自动检测并在页面重新渲染

2. 如果数据是引用类型 ， 数据改变无法引起页面重新渲染

2.1 如果数据是数组

2.1.1 解决方法

1. 合并数组到一个新的数组中

2. Vue对数组变更的一些方法进行了封装

2.2 如果数据是对象类型

2.2.1 解决方法

Vue中data数据变化 -- 页面重新渲染的问题相关推荐

最新文章

热门文章

1. 当数据属于基本类型时， vue会自动检测并在页面重新渲染

2. 如果数据是引用类型，数据改变无法引起页面重新渲染