Vue双向绑定监听哪些数据

已于 2022-01-27 14:28:24 修改
阅读量131 收藏
点赞数
分类专栏： Vue 文章标签： vue
于 2021-08-31 14:55:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s2422617864/article/details/120017870
版权
本文深入探讨了Vue.js中的双向数据绑定机制，重点讲解了`data`对象、`$set`方法以及如何正确实现和监听数据变化。通过实例分析，阐述了直接在函数内赋值、脚本标签声明以及直接新增属性为何无法实现监听，强调了`$set`在确保数据响应性方面的重要性。了解这些最佳实践，有助于提升Vue应用的开发效率和维护性。
摘要由CSDN通过智能技术生成

先说一下结论：

双向绑定的数据

  1. 在data（）{return{}}中声明的
  2. $set设置的数据才会被双向绑定抓取监听
  3. 直接在函数内使用this生命的数据（但不会做深度监听）
    在这里插入图片描述
    其余数据均不可以

script标签下声明（没有监听）

在这里插入图片描述
在这里插入图片描述

函数中声明（没有深度监听）

在这里插入图片描述
在这里插入图片描述

直接新增属性（没有监听）

在这里插入图片描述
在这里插入图片描述

通过$set实现监听（可以监听）

在这里插入图片描述

在这里插入图片描述

火腿肠烧烤大赛冠军
关注
专栏目录
vue input进行v-model双向绑定后，在watch中监听绑定的值，当在watch中设置value值时，input内容未实时改变。
weixin_45037273的博客
12-04 3754
例如： <input type="text" v-model="value" /> watch中监听并设置value的最大长度为50，这样的写法会不生效。 watch: { value(newVal, oldVal) { if (newVal.length > 50) { newVal = newVal.slice(0, 50) this.v...
vue 双向数据绑定的实现学习之监听器的实现方法
10-17
实现双向绑定的关键技术之一是通过使用Object.defineProperty()方法对数据进行劫持（即监听数据属性的读取和修改），结合发布者-订阅者模式来实现响应式更新。 首先，让我们了解Object.defineProperty()方法。这是...
Vue 双向数据绑定，响应式动态监听数据的原理
AKindofo的博客
08-19 858
vue响应式原理
Vue中——数据的双向绑定、计算和监听
weixin_44066534的博客
07-19 1016
Vue中数据双向绑定的方法：v-model v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。 按钮的事件可以使用 v-on 监听事件，并对用户的输入进行响应。 此时运行页面input框里会显示data里content的内容this is hello world ...
vue 非响应式属性放哪_Vue 添加响应式属性的正确姿势
weixin_35133814的博客
02-05 827
默认此文读者明白简单的 Vue 底层原理，对此陌生的读者可以先看：此文使用的 Vue 版本是 2.0+，在线例子看这里，下面顺便也把关键代码贴出来。show aaaaforceupdate {{inputvalue.aaaa}}cccc {{inputvalue.cccc}}@input="inputvalue.cccc = $event.target.value":value="inputval...
VUE监听两个值的变化，同时执行一个方法，如何防止重复执行/和this.$nextTick()用法
你还有我
06-14 2783
vue侦听两个值的变化,同时执行一个方法,致使方法执行了2次处理
Vue数据双向绑定原理
最新发布
qq_39454432的博客
04-19 1743
Vue 数据双向绑定原理
vue双向绑定原理
热门推荐
我是一颗草，哪里荒凉往哪里长
03-07 4万+
** Vue双向绑定的原理 再讲双向双向绑定之前我们需要来了解下MVVM模式 MVVM（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。 View：视图层（UI 用户界面） ViewModel：业务逻辑层（一切 js 可视为业务逻辑，也就是前端的日常工作） Model：数据层（存储数据及对数据的处理如增删改查） MVVM 将数据双向绑定（data-binding）作为核心思想，Vie
Vue双向绑定原理
weixin_52092151的博客
08-20 3万+
vue的双向绑定原理： vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过obj.defineProperty()方法来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变； 简单介绍一下Object.defineProperty()方法： 1、Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty...
Vue 3.0双向绑定原理的实现方法
10-16
Vue.js作为前端开发中广泛应用的JavaScript框架，其核心功能之一便是实现了数据的双向绑定。Vue3.0相较于Vue2.0在双向绑定的数据劫持方式上做了改进，使用了Proxy代理代替了Object.defineProperty来实现数据响应式...
解决VUE双向绑定失效的问题
10-16
这是因为Vue的双向绑定监听的是输入框的键盘输入事件，而中文字符的输入会触发某些特殊处理，影响到监听器。 其次，日期控件的使用也是导致双向绑定失效的常见原因之一。在Vue中，双向绑定通常是通过v-model指令来...
Vue实现双向绑定的原理以及响应式数据的方法
12-12
下面我们将详细讨论Vue如何实现双向绑定和响应式数据。 首先，我们来看对象的响应式实现。Vue在初始化时，通过`Object.defineProperty()`这个ES5提供的API来定义对象的setter和getter。setter用于在数据改变时执行...
Vue中如何使用console.log打印
火腿肠的博客
11-09 7426
1.使用window.console.log() 2.更改配置：
前端角度解决跨域的三种方法（CORS、JSONP、接口代理）
火腿肠的博客
11-02 3122
跨域的概念： 同源策略是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器 都会使用这个策略。 所谓同源指的是： 协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。 ①、http://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议、域名、端口号都相同，同源。 ②、https://www.123.com/i
Vue-三种方式实现tab切换
火腿肠的博客
10-29 3058
一、通过V-show/V-if实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
前端单位的解读和换算px/%/em/rem/vh/vm/vim/vmax
火腿肠的博客
11-06 2634
px 像素 固定单位 % 相对单位 相对于最近的父元素 em em：大小相对于font-size 例：font-size=100 10em =1000 默认 1em=16px，自己有字号大小就相对于自己如果没有就往上找 由于fontsize经常发生改动 所以项目中并不常用 rem（root em） rem：相对于根元素（html）的字号大小 默认 1rem=16px，依旧相对于像素 所以需要找一个根据用户界面可变的单位 vw（viewport width） vw：视口宽度，相对于窗口（视口） 满屏
Vue-cli4.0路由的配置
火腿肠的博客
11-02 2307
1.首先需要先安装路由 可以在ui界面安装也可以npm 2.创建router.js文件并写好 注意点： （1）子路由不需要再写/ （2）如果需要传值 path写成 path: ‘product/:id’,形式 （3）一般都写一个home父模板 其他往里填 // 拉取依赖 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); // 引入所需文件 import Home from './pages/hom
Vue中使用hasOwnProperty
火腿肠的博客
03-30 2043
Object.prototype.hasOwnProperty.call(cardItem.fields.assignee, ‘avatarUrls’
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值