vue3 setup中watch

最新推荐文章于 2024-07-15 20:17:08 发布
最新推荐文章于 2024-07-15 20:17:08 发布
阅读量7.1k 收藏 2
点赞数 3
分类专栏： 笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50736511/article/details/121849524
版权

vue2使用watch(简写)

<template >
  姓名:{{name}}
  <br>
  <button @click="change">修改姓名
  </button>
</template>
<script>
import { computed, reactive, ref } from "@vue/reactivity";
// 引入自定义hooks
export default {
  watch: {
    name(newvalue, oldvalue) {
      console.log(newvalue, oldvalue);
    },
  },
  setup() {
    let name = ref("张三");
    function change() {
      name.value = "李四";
    }
    return {
      name,
      change,
    };
  },
};
</script>

<style>
</style>

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

vue2使用watch(全写)

<template >
 <br>
年龄:{{sum}}
<button @click="change">修改年龄</button>
</template>
<script>
import {  reactive, ref } from '@vue/reactivity';
// 引入自定义hooks
export default {
  watch:{
      sum:{
     immediate:true,
     deep:true,
     handler(newvalue,oldvalue){
       console.log(newvalue,oldvalue);
     }
   },
  },
  setup() {
    let sum=ref(0)
    function change(){
      sum.value=12
    }
    return{
      sum,
      change
    }
  }
};
</script>

<style>
</style>

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

vue3使用watch 第一种（监听数据类型）

<template >
  sum:{{sum}}
  <br>
  <br>
  <button @click="change_sum">改变sum</button>
</template>
<script>
import { reactive, ref } from "@vue/reactivity";
import { watch } from "@vue/runtime-core";
// 引入自定义hooks
export default {
  person: {
    immediate: true,
    deep: true,
    handler(newvalue, oldvalue) {
      console.log(newvalue, oldvalue);
    },
  },
  setup() {
    let sum = ref(0);
    function change_sum() {
      sum.value++;
    }
    watch(sum, (newvalue, oldvalue) => {
      console.log(newvalue, oldvalue);
    });
    return {
      sum,
      change_sum,
    };
  },
};
</script>

<style>
</style>

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

vue3使用watch 第二种（监听多个数据）

<template >
  <br>
  sum:{{sum}}
  <br>
  meg:{{meg}}
  <br>
  <br>
  <button @click="change_sum">改变sum</button><button @click="change_meg">改变meg</button>
  <br>
</template>
<script>
import { reactive, ref } from "@vue/reactivity";
import { watch } from "@vue/runtime-core";
// 引入自定义hooks
export default {
  person: {
    immediate: true,
    deep: true,
    handler(newvalue, oldvalue) {
      console.log(newvalue, oldvalue);
    },
  },
  setup() {
    let sum = ref(0);
    let meg = ref("你好");
    function change_sum() {
      sum.value++;
    }
    function change_meg() {
      meg.value = "世界";
    }

    watch([sum, meg], (nwevalue, oldvalue) => {
      console.log(nwevalue, oldvalue);
    });
    return {
      sum,
      meg,
      change_sum,
      change_meg,
    };
  },
};
</script>

<style>
</style>

在这里插入图片描述

在这里插入图片描述

vue3使用watch 第四种（监听reactive响应数据）

<template >
 姓名:{{person.name}}
 <br>
年龄:{{person.age}}
<br>
新爱好:{{person.habbits.new_hits}}
<br>
旧爱好:{{person.habbits.old_hits}}
<br>
sum:{{sum}}
<br>
meg:{{meg}}
<br>
<br>
<button @click="change_sum">改变sum</button><button @click="change_meg">改变meg</button>
<br>
<br>
<button @click="change_name">修改姓名
</button>   &nbsp; <button @click="change_age">修改年龄</button>&nbsp;<button @click="change_newhits">修改新爱好</button>&nbsp;<button @click="change_oldhits">修改旧爱好</button>
</template>
<script>
import {  reactive, ref } from '@vue/reactivity';
import { watch } from '@vue/runtime-core';
// 引入自定义hooks
export default {
   person:{
     immediate:true,
     deep:true,
     handler(newvalue,oldvalue){
       console.log(newvalue,oldvalue);
     }
   },
  
  setup() {
    let person=reactive({
      name:"李四",
      age:12,
      habbits:{
        new_hits:["吃","喝","玩"],
        old_hits:["打代码","打代码","打代码"]
      }
    })
    let sum=ref(0)
    let meg=ref("你好")
    function change_sum(){
      sum.value++
    }
    function change_meg(){
      meg.value="世界"
    }
    function change_name(){
      person.name="张三"
    }
    function change_age(){
           person.age++
    }
    function change_newhits(){
            person.habbits.new_hits=["臭美","玩"]
    }
    function change_oldhits(){
      person.habbits.old_hits=["吃吃吃","谈恋爱"]
    }
    watch(person,(nwevalue,oldvalue)=>{
       console.log(nwevalue,oldvalue);
    })
    return{
     person,
     sum,
     meg,
   change_name,
   change_sum,
   change_age,
   change_newhits,
   change_oldhits,
      change_meg
    }
  }
};
</script>

<style>
</style>

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

vue3使用watch 第四种（监听reactive响应数据里的某个属性）

<template >
 姓名:{{person.name}}
 <br>
年龄:{{person.age}}
<br>
新爱好:{{person.habbits.new_hits}}
<br>
旧爱好:{{person.habbits.old_hits}}
<br>
sum:{{sum}}
<br>
meg:{{meg}}
<br>
<br>
<button @click="change_sum">改变sum</button><button @click="change_meg">改变meg</button>
<br>
<br>
<button @click="change_name">修改姓名
</button>   &nbsp; <button @click="change_age">修改年龄</button>&nbsp;<button @click="change_newhits">修改新爱好</button>&nbsp;<button @click="change_oldhits">修改旧爱好</button>
</template>
<script>
import {  reactive, ref } from '@vue/reactivity';
import { watch } from '@vue/runtime-core';
// 引入自定义hooks
export default {
   person:{
     immediate:true,
     deep:true,
     handler(newvalue,oldvalue){
       console.log(newvalue,oldvalue);
     }
   },
  
  setup() {
    let person=reactive({
      name:"李四",
      age:12,
      habbits:{
        new_hits:["吃","喝","玩"],
        old_hits:["打代码","打代码","打代码"]
      }
    })
    let sum=ref(0)
    let meg=ref("你好")
    function change_sum(){
      sum.value++
    }
    function change_meg(){
      meg.value="世界"
    }
    function change_name(){
      person.name="张三"
    }
    function change_age(){
           person.age++
    }
    function change_newhits(){
            person.habbits.new_hits=["臭美","玩"]
    }
    function change_oldhits(){
      person.habbits.old_hits=["吃吃吃","谈恋爱"]
    }
    watch(()=>person.age,(nwevalue,oldvalue)=>{
       console.log(nwevalue,oldvalue);
    })
    return{
     person,
     sum,
     meg,
   change_name,
   change_sum,
   change_age,
   change_newhits,
   change_oldhits,
      change_meg
    }
  }
};
</script>

<style>
</style>

在这里插入图片描述

在这里插入图片描述

万事胜意sy
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue3中的watch
weixin_49343253的博客
03-21 1505
例子：点击按钮，网页标题改变 <template> <div id='app'> <img alt="vue logo" src="./assets/logo.png"> <!-- ref对象在模板中引用时，vue可以直接把内部的值展示出来，不需要写count.value --> <h1>{{count}}</h1> <h1>{{double}}</h1> <
Vue3-watch
WFL804203164的博客
01-17 314
watch 和Vue2基本相似，配置是一样的 两个坑： 监视reactive定义的响应式数据时：oldVal无法正确的获取，强制开启了深度监视（deep配置无效） 监视reactive定义的响应式数据中的某个属性（对象）时：deep配置有效 <template> <h1>{{num}}</h> <h1>{{msg}}</h> </template> <script> import {ref,reac
【vue3】vue3 setup如何使用watch？
qq_39576711的博客
03-23 1万+
setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。 他接受两个参数： {Data} props {SetupContext} context 在setup选项里使用watch有两种办法。 第一种：使用watchEffect，watchEffect立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。 示例： <script lang="ts"> import { ref,watchEffect } from 'vue'
vue3 setup 里的计算属性（computed）和侦听器（watch/watchEffect）
热门推荐
青蛙king的博客
07-05 2万+
计算属性在vue3中是一个函数【参考】 VUE3（十四）使用计算属性computed和监听属性watch vue3的计算属性与watch Vue 3 响应式侦听与计算 vue3计算属性（computed）与监听（watch） Vue3官网-高级指南（十七）响应式计算和侦听（onTrack、onTrigger、onInvalidate、副作用的刷新时机、 、pre）................................................
vue3在 setup 中访问路由和当前路由
最新发布
DN金猿的博客
07-15 473
所以如果你只在模板中使用这些对象的话，是不需要。对象是一个响应式对象。在多数情况下，你应该。对象，同时直接监听你期望改变的参数。请注意，在模板中我们仍然可以访问。，所以我们不能直接访问。
【Vue3】setup的注意点及watch监视属性的六种情况
zhaochen1127的博客
04-18 2816
博主简介🛌 某神秘组织成员前端小白，前端优质创作者，阿里云博主，一个开朗的网友有一个名为山鱼社区的社区，收录许多优秀博主的创作内容创作不易希望能得到您的支持，您的支持是我创作的动力✌。
Vue3（一）：创建vue3工程、setup、vue3响应式原理、computed和watch
weixin_42044763的博客
05-25 2443
这个setup函数其实有两种返回值：1、返回一个对象 2、返回一个渲染函数，用的最多的就是返回一个对象，把用到的所有属性、方法都返回出去，方便在模板中使用（当然，现在有了setup语法糖，后面再说）如果这种情况的话和上面类似，不同的是第一个参数写成数组，且每个元素是箭头函数，返回的new和old值也是相对应的值构成的数组。其实和上面的情况四是一样的，如果简单数据类型直接.value，那么监视的就是一个写死的值。，而setup则是组合式API表演的舞台，组件中所有的数据和方法都写在setup函数中。
vue3 setup语法糖中使用watch和computed
weixin_47560151的博客
08-08 2673
vue3中watch和computed
VUE3笔记 VUE3 VUE
01-02
以上只是Vue3的一部分核心特性，实际上还有更多细节和进阶特性，如`setup`函数、`watch`的改进、`provide`和`inject`的变化等。学习Vue3不仅能够提升开发效率，还能让你更好地适应前端技术的发展趋势。通过阅读和...
解决Vue watch里调用方法的坑
01-18
这里是说watch调用methods里方法的时候，页面经常会报找不到方法 这个时候一定要在watch里去输出一下this， 看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳...
vue3快速上手.md
01-06
- Vue3可以更好的支持TypeScript 4.新的特性 1. Composition API（组合API） - setup配置 - ref与reactive - watch与watchEffect - provide与inject 2. 新的内置组件 - Fragment - Teleport - Suspense 3. ...
vue2、vue3开发工具 dev tools，页面数据更新，data里或者是setup的数据不更新，需要更换增强版插件
05-09
而在Vue 3中，引入了Composition API，`setup`函数是新引入的入口点，用于组合状态和逻辑。尽管如此，无论是`data`还是`setup`中的数据，都应该遵循响应式规则。 如果在尝试卸载并重新安装Vue DevTools，甚至清理...
vue 3 学习笔记 vue3 vue3学习笔记
10-18
本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的入口，在这里定义的...
vue3学习笔记-setup中使用watch
沙漏的前端笔记
06-10 2266
vue3 setup watch
【Vue3】setup参数细讲！computed计算属性和watch监听属性
weixin_44899940的博客
07-15 3083
【Vue3】setup参数细讲！computed计算属性和watch监听属性
Vue3（一）setup、响应式ref、reactive、computed、watch、watchEffect
DogEgg_001的博客
10-22 670
监视单个数据setup() {// 监视ref定义的数据 单个// 第一个参数：监视的数据；第二个参数：监视数据的回调；第三个参数：配置（immediate、deep）console.log('修改了age', newValue, oldValue)...监视多个数据// 监视ref定义的数据 多个 以数组形式console.log('name或age被修改了', newValue, oldValue);})监视ref定义的对象/数组数据//监视ref定义的对象/数组数据。
Vue3学习之第四节：setup()中使用watch、watchEffect 函数
weixin_44209082的博客
04-26 2872
一、watch 监听 import { ref, watch, reactive } from 'vue' export default { setup(){ let str = ref('') let msg = ref('你好！') let person = reactive({ name: '王五', age: 100, info: { a: { salary: 20 } } }) // 情况一：监听ref所定义的一个响应
Vue3技术之 setup、computed、watch 容易踩坑的点！
qq_53895518的博客
08-08 361
聊点不一样的东西 面试vue3容易踩坑的点
Vue3 watch setup
qq_24924187的博客
10-19 7665
<template> <button @click="change">count is: {{ state.count }}</button> </template> <script> import { reactive, watch } from 'vue' export default { setup () { let state = reactive({count: 0}) let change = () =>
vue3 setup中watch用法
07-28
在 Vue 3 的 Composition API 中，可以使用 `watch` 函数来监听响应式数据的变化。`watch` 函数有两个参数：要监听的数据和回调函数。 下面是一个使用 `watch` 的示例代码： ```javascript import { watch, ref } from 'vue'; export default { setup() { const count = ref(0); watch(count, (newValue, oldValue) => { console.log(`count 变化了，新值为 ${newValue}，旧值为 ${oldValue}`); }); return { count }; } } ``` 在上面的例子中，我们定义了一个名为 `count` 的响应式数据，并使用 `watch` 函数来监听它的变化。当 `count` 的值发生变化时，回调函数会被触发，并且会传入新值和旧值作为参数。 需要注意的是，在 Vue 3 的 Composition API 中，`watch` 函数的第一个参数可以是一个响应式数据，也可以是一个返回响应式数据的函数。这使得我们可以更加灵活地监听多个数据的变化。 此外，`watch` 函数还可以接收第三个参数，用于配置更多选项，例如设置是否立即执行回调函数等。具体的用法可以参考 Vue 3 的官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万事胜意sy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值