VUE框架Vue3下使用watch监听ref下的数据变化------VUE框架

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    
    
    
    
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<link rel="icon" href="/favicon.ico">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vite App</title>

</head>

<body>









<div id="app"></div>

<script type="module" src="/src/main.js"></script>

</body>

</html>

<template>
    <h1>{
    
    { counter }}</h1>
    <button @click="plus()">加一</button>
    <h1>{
    
    { counter1 }}</h1>
    <button @click="plus1()">计数器2</button>
</template>

<script>
import {watch,ref} from 'vue';
export default {
    name : "App",
    setup(){
        let counter = ref(0);
        let counter1 = ref(100);
        // 监视属性配置
        // 被监视的属性需要具有响应式
        // watch(counter,(newValue,oldValue) => {
        //     console.log("新值是"+newValue+"旧值是"+oldValue);
        //     // 可以在后面写配置对象
        // },{immediate:true,deep:true});
        // watch(counter1,(newValue,oldValue) => {
        //     console.log("新值1是"+newValue+"旧值1是"+oldValue);
        // },{immediate:true,deep:true});

            // 采用数组的形式一次监视多个属性配置方法
        watch([counter,counter1],(newValue,oldValue) => {
            console.log("新值是"+newValue+"旧值是"+oldValue);
        },{immediate:true,deep:true});

        function plus(){
            // 这里的this是这个setup的代理对象
            // 这里做了代理
            // console.log(this);
            this.counter++;
        }
        function plus1(){
            this.counter1++;
        }
        return {counter,plus,plus1,counter1};
    }
    // data(){
    //     return {
    //         counter : 0
    //     }
    // },
    // watch : {
    //     // 被监视的属性必须具有响应式
    //     // 简写形式
    //     // counter(newValue,oldValue){
    //     //     console.log("新值是"+newValue+"旧值是"+oldValue);
    //     // }
    //     // 完整写法
    //     counter : {
    //         immediate : true,
    //         deep : true,
    //         handler(newValue,oldValue){
    //             console.log("新值是"+newValue+"旧值是"+oldValue);
    //         }
    //     }
    // },
    // methods : {
    //     plus(){
    //         this.counter++;
    //     }
    // }
}
</script>

<style>

</style>
<template>

<h1>{ { counter }}</h1>

<button @click="plus()">加一</button>

<h1>{ { counter1 }}</h1>

<button @click="plus1()">计数器2</button>

</template>

<script>

import {watch,ref} from 'vue';

export default {

name : "App",

setup(){

let counter = ref(0);

let counter1 = ref(100);

// 监视属性配置

// 被监视的属性需要具有响应式

// watch(counter,(newValue,oldValue) => {

// console.log("新值是"+newValue+"旧值是"+oldValue);

// // 可以在后面写配置对象

// },{immediate:true,deep:true});

// watch(counter1,(newValue,oldValue) => {

// console.log("新值1是"+newValue+"旧值1是"+oldValue);

// },{immediate:true,deep:true});

// 采用数组的形式一次监视多个属性配置方法

watch([counter,counter1],(newValue,oldValue) => {

console.log("新值是"+newValue+"旧值是"+oldValue);

},{immediate:true,deep:true});

function plus(){

// 这里的this是这个setup的代理对象

// 这里做了代理

// console.log(this);

this.counter++;

}

function plus1(){

this.counter1++;

}

return {counter,plus,plus1,counter1};

}

// data(){

// return {

// counter : 0

// }

// },

// watch : {

// // 被监视的属性必须具有响应式

// // 简写形式

// // counter(newValue,oldValue){

// // console.log("新值是"+newValue+"旧值是"+oldValue);

// // }

// // 完整写法

// counter : {

// immediate : true,

// deep : true,

// handler(newValue,oldValue){

// console.log("新值是"+newValue+"旧值是"+oldValue);

// }

// }

// },

// methods : {

// plus(){

// this.counter++;

// }

// }

}

</script>

<style>

</style>

VUE框架Vue3下使用watch监听ref下的数据变化------VUE框架

猜你喜欢