Vue数据改变视图没变？ :bind传递值和对象的区别？

最新推荐文章于 2023-07-19 16:14:19 发布
最新推荐文章于 2023-07-19 16:14:19 发布
阅读量397 收藏
点赞数 1
分类专栏： Java 学习 三月
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syhdeclan/article/details/94833966
版权

  首先这是一片记录性的文章，只能给观看的人提供一种问题的解决思路，个人目前并没有兴趣或者是时间去翻看Vue的源码，所以不喜勿喷～
  #问题背景：
由于自己项目的需求需要用到VueDraggable这个插件，用来实现拖拽改变数组数据的功能，看起来和测试都没什么问题。但是在自己的项目上实验的时候，发现鼠标拖动完，事件确实触发了，测试的时候数组内容也发生改变了，为啥页面上的东西看起来就是没有变化呢？？
  #解决：
  在我反复确认不是参数或者是设定出问题之后，把矛头指向了:bind上面，我发现别人的demo里面用的都是最简单的标签比如p，div之类的
而我的是自己封装的一个组件，同时把数组中的对象bind到组件之中。然后就测试，在我自己的封装的组件中，只传对象的一个值，不传整个对象，发现视图竟然真的变化了。
所以我第一反应是，把整个对象的所有属性拆分开传递过去。但是怎么想怎么不合适，就单从封装和可维护性上而言。。然后哈哈哈哈哈哈哈哈就是我自己佩服自己的无敌的解决办法，传过去对象的同时把一个一定会有的属性值也传递过去，比如key或者name什么，就强制导致视图跟着数组发生变化啦哈哈哈哈，半个上午解决了个虽然本身不应该存在但是还是不是很小并且比较重要的问题，嗯，高兴！
  #目前只能猜测
  :bind 一个属性和一整个对象在这里好像是有差距的，如果我只传递一个对象，传过去的应该只是一个引用值，尽管原对象数组顺序发生改变了，但是对象的地址或者是某种引用关系并没有发生改变。而当我传递一个属性值过去的时候，传过去的值就是值，数组变了，原索引的值就不是那个值了，所以视图发生了刷新！

###求大佬点明指正！！
 

syhdeclan
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决vue中对象属性改变视图不更新的问题
08-27
总之，当遇到Vue中对象属性改变而视图未更新的情况时，应避免直接修改对象属性，而是采用上述方法之一来确保Vue的响应式系统可以正常工作。这不仅能保证数据驱动视图的正确性，还能防止潜在的bug和意外行为。在开发...
vue里面v-bind和Props 利用props绑定动态数据的方法
10-18
在Vue.js框架中，`v-bind` 和 `props` 是两个关键的概念，它们主要用于在父组件和子组件之间传递数据。本文将详细讲解如何利用 `v-bind` 和 `props` 来绑定动态数据。 首先，`v-bind` 是Vue的一个指令，它的作用是...
Vue：子组件接收不到父组件所传的值（v-bind）
任她雨雪风晴
07-03 4254
一个很基础的父组件向子组件传值： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
v-bind属于单项绑定，常用语属性等不支持修改的数据绑定
小程序开发|oa系统|网站开发
04-24 624
Vue之绑定数据 v-bind v-on v-model 区别 简单说：v-bind 是单项绑定， 而 v-model 是双向绑定 看实例 v-bind:单项绑定 <html> <div id="app"> <input type="text" v-bind:value="Myvalue"> <p>Input绑定的值Value={{My...
vue系列文章（16）传值和传引用的类型和区别
D.K专栏
07-06 1086
父组件在向子组件进行传输内容的时候，如果传输的类型是array object，那么传递的是一个引用。如果父组件向子组件传递的是一个String,Number,boolean则传递的是一个值。下面对这两种情况进行代码演示。 在子组件里增加一个按钮修改传递的值的情况，观察两个组件的内容是否变化。 app.vue <template> <div id="app"> ...
vue 数据变化视图没有变化解决方法
l741938507的博客
12-13 478
调用内置强制更新 this.$forceUpdate()
vue 页面绑定值不刷新问题
klousYG的博客
07-24 1442
vue 页面绑定值不刷新问题 问题：在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值； 原因：此代码块中的v-model应直接绑定“值”，而此处绑定的是“某对象中的值” 例： <el-input v-model="model[`text`]" /> 解决方案： 运用 this.$forceUpdate()强制刷新即可 <el-input v-model="model[`text`]" @input="c
VUE_v-bind 传入一个对象的所有属性
小歪博客
04-14 1525
官方文档
详解vue中v-model和v-bind绑定数据的异同
10-14
总结起来，`v-bind` 和 `v-model` 在Vue中分别代表单向数据绑定和双向数据绑定，它们都用于建立组件和数据之间的桥梁。`v-bind` 更适合于静态属性的设置和更新，而 `v-model` 则适用于表单元素的交互，提供便捷的...
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
10-15
总结，解决Vue中ECharts数据更新但视图未更新的问题，关键在于正确地使用Vue的响应式系统和ECharts的`setOption`方法。通过监听数据变化并在变化发生时调用`setOption`，可以确保ECharts图表与Vue的数据模型保持同步...
vue中给子组件传递一个对象
业余前端的职业经历
03-20 3116
我们在父子组件传惨中其中父组件是通过props传递给子组件 <childmsg="hellovue.js"></child> 然后在子组件中 props:['msg']这样进行接收 这样是一个一个进行传递的,但有的时候我们需要将整个对象传递过去呢 obj:{ name:'jack', age:1...
vue v-bind没有生效
最新发布
RubyLinT的博客
07-19 764
封装组件，调用时直接在父容器里v-bind将属性传值给组件，怎么试都没生效，后来发现是写法错了。
vue学习之(prop传参、v-bind传参、$emit向父级发送消息、input组件上使用 v-model、事件抛值)
迪迦 • 奥特曼
08-08 1887
基本示例 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用 <div id="components-demo"> <button-counter></button-counter> </div> <script> Vue.component('button-counter', {
Vue v-bind: 接收一个单独的对象
可控的事情要谨慎，不可控的事情要乐观。
10-10 1091
<script src="https://unpkg.com/vue"></script> <div id="blog-post-demo" class="demo"> <div :style="{ fontSize: postFontSize+'em' }"> <blog-post v-for="post in po...
Vue- 对象语法 v-bind:class与对象语法的使用
qq_36371276的博客
06-12 812
我们可以传给 v-bind:class 一个对象，以动态地切换 class 。&lt;div v-bind:class="{ active: isActive }"&gt;&lt;/div&gt;//对象语法也就是在v-bind:class绑定一个对象的时候，里面的值将影响最终取值，//比如如果 这里isActive的值为true 则会被渲染成class='active' 如果为false , 则...
vue学习十一(全局局部组件、prop传不同值、 v-bind 动态赋值、单向数据流、prop校验)
全干工程师
09-29 6049
文章目录局部注册dom模板解析注意事项用 Prop 传递不同值类型用 Prop通过 v-bind 动态赋值用 Prop传递对象的所有属性用 Prop传递对象数组用 Prop传入一个数字单向数据流Prop 验证 局部注册 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件： var ComponentA = { /* ... */ } 然后在 components 选项中定义...
前端笔记-vue cli中v-bind动态数据实时更新
IT1995的博客
07-30 7386
目录 基本概念 代码 基本概念 如下的例子，刚开始运行： 点击按钮： 数据库修改下数据： 再点击按钮刷新下： 下面给出请求的json数据: 刷新有2个方式 第一种是强制刷新，这样是有问题的，数据和图表不能同步： this.$forceUpdate() 本人推荐下面这种方式，通过绑定组建的key值 <barChartItem ...
vue中v-model和v-bind绑定数据的异同
JunZhao09的博客
06-04 1222
vue的模板采用DOM模板，也就是说它的模板可以当做DOM节点运行，在浏览器下不报错，绑定数据有三种方式，一种是插值，也就是{{name}}的形式，一种是v-bind，还有一种是v-model。{{name}}的形式比较好理解，就是以文本的形式和实例data中对应的属性进行绑定。比如： var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data: {
vue中遇到数据变了，视图没有改变的原因及解决方案---kalrry
kalrry
12-30 2740
vue中遇到数据变了，视图没有改变的原因及解决方案---kalrry出现数据变了视图没变的原理解决方案 $set$set的解决原理 出现数据变了视图没变的原理 在vue中，模型变视图变，是因为vue中有数据劫持与发布订阅者模式共同影响的，但是数据劫持是通过Object.defineProperty()来进行劫持的，但是Object.defineProperty()只会监听初始化的时候data数据，初始化之后新添加的数据是不会被劫持的，这才导致模型变了数据劫持劫持不上，导致视图没有gengxin 解决方案 $
"Vue面试题分享: 优点、数据传递和指令区别详解
4. 视图、数据、结构分离：Vue的设计让数据更改变得更为简单，不需要进行逻辑代码的修改，只需要操作数据即可完成相关操作。 5. 虚拟DOM：DOM操作是非常耗费性能的，Vue采用虚拟DOM的方式进行操作，极大地解放了DOM...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值