vue watch 监听触发

最新推荐文章于 2024-07-10 11:21:49 发布
最新推荐文章于 2024-07-10 11:21:49 发布
阅读量652 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panhuanqin/article/details/83753328
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="box">
    <input type="text" v-model="name">
    <h3>{{name}}</h3>
    <input type="text" v-model="age">
    <h3>{{age}}</h3>
    <h3>{{text1}}</h3>
    <input type="text" v-model="user.name">
    <h3>{{user.name}}</h3>
    <h3>{{text2}}</h3>
     <!--与计算属性的区别 当监听到值发生变化是过程式开发 比较笨重-->
    <h3>{{info}}</h3>
</div>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    var vm = null;
    vm = new Vue({
        el: "#box",
        data: {            //data里面的属性可以写在外面  但是不具备双向绑定之类的功能
            name:'moris',
            age:22,
            user:{
                id:100,
                name : '111'
            },
            text1:'',
            text2:''
        },
        methods:{   //有人改变就改变

        },
        watch:{                                           //监听  对应值改变就改变   不要大量使用
            age:function (newValue,oldValue) {    //两参  一个原来的  一个修改后的
                console.log('age被修改了',newValue,oldValue);
                this.text1='我的年龄'+newValue+'我的名字'+this.name;
            },
            name:function (val) {
                console.log(val);
                this.text2 = '我的名字'+val+'我的年龄'+this.age
            },
            user:{
                // bandler:(newValue,oldValue)=>{
                //     console.log('user被修改了',newValue,oldValue);
                // },
                //deep:true   //表示监听对象属性的变化   false  bandler不执行
            },
        },
        computed:{
            info:function () {
                return '我的年龄'+this.age+'我的姓名'+this.name;
            }
        }
    })
      // 外部写法
    // vm.$watch('name',function (newValue,oldValue) {
    //     console.log('age被修改了',newValue,oldValue);
    // })
</script>
</body>
</html>
笔临
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue：生命周期函数的作用
yivisir的博客
08-09 2136
Vue：生命周期函数的作用 前言 Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 各函数的作用 beforeCreated(): 表示在实例被完全初始化之前调用该函数； created(): 此时Vue的数据和方法（data，methods）都已经初始化好了； 如果要操作data和methods，最早需要在这个函数中操作； created完成后就开
vue中的监听事件（watch）
SeeU
07-29 2万+
使用watch这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理 html: 在html里写下那个事件会让触发methods让data发生变化 <input type="text" v-model="firstname" @keyup="getFullname">+ data: 这里是data里面的值 data: { firstname: "", lastname: "", ful
vue中使用watch监听路由导致多次请求问题解决方法
小白的博客
07-07 3440
首先想到的做法就是：直接监听，例： 但是这种方法在页面被缓存的情况下，成倍的调用watch里面的方法，多次向后端请求数据，可能会导致溢出有了第一种错误的出现，会想着是否可以将路径存在vuex中统一管理，例：vuex代码 监听路由，将最后路由的结果存进vuex，再使用computed获取这个值：changeRoute，最后再次监听：changeRoute， 结果并没有什么用直接使用watch监听地址栏，和上面的方法相同，依旧是computed获取，watch监听，就不会出现多次请求的情况了
Vue3中使用watch监听数据变化如何避免频繁触发
最新发布
小磊很烦bug的博客
07-10 511
对于方式1,因为子表单的数据源是formData下的对象属性，必须采取深层监听，因此不采取。对于方式3，因为被该改变的值也是子表单数据源formData的一个对象属性，所以不采取。子表单数据集formData。
2023前端面试系列-- Vue 篇
web全栈开发的博客
02-01 4318
MVVM，是的简写，其本质是MVC模型的升级版。其中Model代表数据模型，View代表看到的页面，ViewModel是View和Model之间的桥梁，数据会绑定到ViewModel层并自动将数据渲染到页面中，视图变化的时候会通知ViewModel层更新数据。以前是通过操作DOM来更新视图，现在是数据驱动视图。
详解Vue中的Watch监听
weixin_50361808的博客
08-27 1522
Watch 本文将从以下方面讲解个人理解的Watch监听 1、普通Watch与监听事件回调 2、深度监听：deep 3、初始化时触发：immediate 4、Watch与Computed的区别 在官方的原话是 字面意思，watch是一个对象，对象中的 键 是 需要被监听的表达式（在data中声明的或是父组件传递props中的数据），值 是 对应固定的回调函数，或者是一个定义在methods中的方法名称。 实例化的时候会调用 $watch() 去遍历你在watch中设置的所有属性（键：值） 1、普
vue watch监听对象及对应值的变化详解
11-26
在Vue实例中，我们可以通过`watch`对象来监听数据的变化，并在变化发生时执行相应的处理函数。 在给定的示例中，`watch`被用来监听`data`对象中的`a`和`b`属性。`a`是一个基本类型的数据（在这里是数字），所以当...
vue中的watch监听数据变化及watch中各属性的详解
10-18
- deep属性用于深度监听，它可以让watch监听到对象内部属性的变化。由于Vue的响应式系统默认只能监听对象属性的添加和删除，而不能监听属性值的变化，deep属性可以解决这一限制。例如，watch: { data: { handler: ...
vue 子组件watch监听不到prop的解决
10-14
然而，在处理异步数据时，有时子组件的watch属性无法监听到prop的变化，这会导致组件状态不及时更新。为了解决这个问题，可以采用以下几种方法： 1. 使用immediate属性。在watch对象中，为要监视的prop添加...
Vue使用watch监听一个对象中的属性的实现方法
10-17
Vue.js通过watch属性提供了非常灵活的方式来监听数据源的变化。当需要监听的对象属性发生变化时，可以通过设置深度监听（deep: true）来确保变化能被捕捉。对于对象内部的特定属性，可以直接在watch中指定属性名来...
vue watch props 不触发_Vue面试汇总
weixin_39945792的博客
11-25 1008
1、vue数据双向绑定原理以及订阅者模式核心就是利用Object.defineProperty 方法Object.defineProperty(obj, prop, descriptor) descript最核心是get 和 set当我们访问了该属性的时候会触发 getter 方法；当我们对该属性做修改的时候会触发 setter 方法。一旦对象拥有了 getter 和 setter，我们可以简单地...
Vue 相关
i_Satan的博客
04-14 609
全局事件总线的大致使用流程： //创建一个全局事件总线 、、在main.js入口文件中挂载 new Vue({ beforCreate(){ Vue.prototype.$bus=this; } }) //需要 接收 数据的组件 { //绑定全局事件总线上的 自定义事件 mounted(){ this.$bus.$on("需要绑定的事件"，""绑定事件后需要触发的函数"") } //解绑全局事件总线上的 自定义
vue3.0---watch使用方法
weixin_38687522的博客
06-11 586
<template> <div> watch监听ref属性值：{{a}} <el-button type="primary" @click="plusFn">ref加1</el-button> </div> <div> watch监听reactive属性值：{{b}} <el-button type="primary" @click="plu
Watch数据监听详解（Vue2+Vue3）
宝子的博客
08-27 1万+
watch数据监听，各种用法和一些属性的解释说明。
watch监听属性的使用
Lnbd_的博客
03-01 1718
watch监听
watch中的深度监听
热门推荐
SilentLand的博客
11-26 4万+
watch 只要被监听的数据发生改变，就会触发对应的逻辑代码 如果被监听的数据是个对象（或数组），对象（或数组）中的属性发生改变时，监听是不会触发上的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
【watch】watch各类型数据监听
BMG-Princess
07-10 1566
使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听，数组字符串一般不需要。watch中需要具体执行的方法。
vue watch监听触发多次
03-24
但是有时候，我们可能会遇到watch监听触发多次的况。 造成watch监听触发多次的原因通常有两种情况： 1. 监听的数据发生了多次变化：如果被监听的数据在一次事件循环中发生了多次变化，watch会在每次变化时都触发回...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值