首页 > 其他分享 >Vue Day2-watch

Vue Day2-watch

时间:2023-01-05 14:57:25浏览次数:47  
标签:Vue watch Day2 newValue oldValue true 监听 属性

  • watch 

监听数据的变化,从而实现相应的业务逻辑

主要应用场景是监听数据的变化处理副作用

与处理数据无关的的操作都算副作用,如 日志处理、异步请求、本地存储操作等。

  • 只监听单个属性值的变化:
watch:{
  'obj.a'(newValue,oldValue){
    console.log(newValue,oldValue)//newValue:a属性更改后的值 oldValue:a属性原值
                   } ,
    }

 

  • 如果要监听一个对象,则需要额外加一个属性:深度监听 deep: true,
watch:{
  'obj':{
    handler(){
      console.log(newValue,oldValue)
          }
   deep: true,
    } ,
  • 有时候希望一进入页面(在挂载阶段) 就自动默认执行一遍监听  这就需要属性:立即执行    immediate: true
watch:{
  'obj':{
    handler(){
      console.log(newValue,oldValue)
          }
   deep: true,
  immediate: true, // 立即调用     } ,

 

标签:Vue,watch,Day2,newValue,oldValue,true,监听,属性
From: https://www.cnblogs.com/qqwx/p/17027449.html

相关文章

  • vue-print-nb的应用
    1、cnpmivue-print-nb2、触发事件:v-print="printObj"3、触发的是个对象:printObj:{        id:'print', //需要打印的盒子     ......
  • Vue3路由的redirect重定向结合函数实现不同的用户身份跳转到不同的首页
    访问网页主域名的时候,识别用户身份跳转到不同的首页,配置路由重定向constroutes:Array<RouteRecordRaw>=[//访问主域名的时候,根据用户的登录信息,重定向到不同的页......
  • vue + uniapp实现手机横屏弹幕
    小程序,手持弹幕,输入文字之后,弹幕从右往左匀速划过,再次循环。实现这个功能,首先建一个uniapp项目,建一个vue页面<template> <viewclass="danmu_bg"> <viewclass="......
  • 在vue中watch和created哪个先执行?
      官网的生命周期图中,initreactivity是晚于beforeCreate但是早于created的。watch加了immediate:true,应当同initreactivity周期一同执行,会早于created执行。而正常......
  • vue2 vue3 禁用F12控制台 打印渲染新内容 禁用右键等
    constdisabled=()=>{//console.log('禁止脚本,运行成功');constconfig={rightKey:false,//是否开启右键菜单controller:fal......
  • vue面试考察知识点全梳理
    一、简介vue几个核心思想:数据驱动组件化虚拟dom、diff局部最优更新源码目录介绍Vue.js的源码在src目录下,其目录结构如下。src├──compiler#编译......
  • 校招前端一面必会vue面试题指南
    写过自定义指令吗?原理是什么回答范例Vue有一组默认指令,比如v-model或v-for,同时Vue也允许用户注册自定义指令来扩展Vue能力自定义指令主要完成一些可复用低层级DOM操......
  • uniapp + vue 实现色弱测试小游戏
    最终的效果:点击色块中不同的色块,跳到下一关准备一些静态数据,放到js目录下,在vue文件中引入即可//在1到比1大的任意整数之间随机取一个整数exportconstgetRandom......
  • Vue3中操作子组件实例
    子组件Child.vue<template><hr/>{{INFO}}<hr/><button@click="changeInfo">changeInfo</button></template><scriptsetuplang="ts">import{ref,r......
  • vue本地头像实时更新
    代码template<divclass="form-group"><p><labelfor="avatar"><img:src="imageUrl"alt=""id="img"ref="img"style="width:100%;"></l......