Vue学习 Day02

已于 2024-08-17 13:46:13 修改
阅读量770 收藏 10
点赞数 5
文章标签： vue.js 学习 javascript
于 2024-08-16 22:26:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c1tenj2/article/details/141224610
版权

 Vue常用指令

 条件渲染

案例

<!-- 条件渲染
 -->
<template>
    <span v-if="flag">flag为true时显示这个span</span>
    <br>
    <span v-show="flag">条件为真时渲染</span>
    <br>
    <span v-if="sex==1">🚹</span>
    <span v-else-if="sex==0">🚺</span>
    <span v-else>不男不女</span>
    <button @click="f1">改变sex值</button>
    <br>

</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    let flag=true
    let sex=ref(0)

    function f1(){
        if(sex.value==0){
            sex.value=1
            return
        }
        else{
            sex.value=0
        }
    }
</script>

v-if和v-show的区别，当判定条件为假时，v-show只是不显示它所包裹的内容，会保留它的结构，而v-if时直接删除，不保留

列表渲染 

 案例

<!-- 列表渲染 -->
<template>
    <table>
        <tr v-for="stu in students" :key="stu.id">
            <td>{{stu.id}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.age}}</td>

            <td v-if="stu.sex==0">🚹</td>
            <td v-else>🚺</td>
            
            <td>{{ stu.classroom }}</td>
        </tr>
    </table>

    <!-- v-for   -->
    <span>**************************</span>
    <div v-for="value in myObject">
        <span>{{ value }}</span>
    </div>
    <span>**************************</span>
    <div v-for="(stu, key) in students">
    {{ key }}: {{ stu }}
    </div>
    <span>**************************</span>
    <div v-for="(value, key, index) in myObject">
    {{ index }}. {{ key }}: {{ value }}
    </div>

</template>

<script lang="ts" setup>
    import { reactive } from 'vue';
        let students=reactive([
        {
        id:"2",
        name:"李四",
        age:"36",
        sex:1,
        classroom:"2"
        },
        {
        id:"3",
        name:"周天",
        age:"77",
        sex:0,
        classroom:"1"
        },
        {
        id:"4",
        name:"王五",
        age:"99",
        sex:0,
        classroom:"8"
        },
        {
        id:"5",
        name:"刘六",
        age:"10",
        sex:1,
        classroom:"5"
        }
    ])

    const myObject = reactive({
    title: 'How to do lists in Vue',
    author: 'Jane Doe',
    publishedAt: '2016-04-10'
})

watch

作用:监视数据的变化

牢记watch只能监视如下4种数据:

  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值（getter函数）。
  4. 一个包含上述内容的数组。

因为ref可以定义基本类型和对象类型，所以watch对数据的监视可以分为5种情况

1.watch监视ref定义的基本类型数据

<template>
    <div class="person">
      <h1>情况一：监视ref定义的基本类型数据</h1>
      <h2>当前求和为：{{sum}}</h2>
      <button @click="changeSum">点我sum+1</button>
    </div>
  </template>
  
  <script lang="ts" setup >
    import {ref,watch} from 'vue'
    // 数据
    let sum = ref(0)
    // 方法
    function changeSum(){
      sum.value += 1
    }

    /*
    watch参数    要监视的数据     一个回调函数（在被监视的数据的地址值发生改变时被调用） 
    watch返回一个停止监视函数 调用它停止对watch的监视
    */
    const  stop=watch(sum,(newValue,oldValue)=>{
        console.log("新值:"+newValue+"--"+"旧值"+oldValue)
        if(newValue>=10){
            stop() //停止监视
        }
    })
  </script>

重点：回调函数在数据的地址值发生变化时被调用 

2.watch监视ref定义的对象类型数据

<template>
    <div class="person">
      <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年龄：{{ person.age }}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changePerson">修改整个人</button>
    </div>
  </template>
  
  <script lang="ts" setup name="Person">
    import {ref,watch} from 'vue'
    // 数据
    let person = ref({
      name:'张三',
      age:18
    })
    // 方法
    function changeName(){
      person.value.name += '~'
    }
    function changeAge(){
      person.value.age += 1
    }
    function changePerson(){
      person.value = {name:'李四',age:90}
    }
    /* 
      监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
      watch的第一个参数是：被监视的数据
      watch的第二个参数是：监视的回调
      watch的第三个参数是：配置对象（deep、immediate等等.....） 
    */
    watch(person,(newValue,oldValue)=>{
      console.log('person变化了',newValue,oldValue)
    },{deep:true})
    
  </script>

 

可以看到，开启深度监视后，name和age字段的改变也会被我们监视到 

**************************************** 

如果watch是这样写的(没有开启深度监视，那么只有修改整个人，回调函数才会被调用)

    watch(person,(newValue,oldValue)=>{
      console.log('person变化了',newValue,oldValue)
    })

3.watch监视reactive定义的对象类型数据

<template>
    <h2>姓名:{{ student.name }}</h2>
    <h2>年龄:{{ student.age }}</h2>
    <button @click="f1">改变姓名</button>
    <button @click="f2">改变年龄</button>
    <button @click="f3">改变整个人</button>
</template>

<script setup>
    import { reactive, watch } from 'vue';
    let student=reactive({
        "name":"张三",
        "age":13
    })

    function f1(){
        student.name=student.name+"~"
    }

    function f2(){
        student.age=student.age+1
    }

    function f3(){
        Object.assign(student,{
        "name":"李四",
        "age":99
    })
    }

    watch(student,(newValue,oldValue)=>{
        console.log("发生变化",newValue,oldValue)
    })

/*
    这样是不行的  因为reactive定义的整个对象会失去响应式
  function f3(){
        student={
        "name":"李四",
        "age":99
    } 
    }*/
</script>

注意看，这里的newValue和oldValue都是一样的

我们首先需要明确的是：

1.回调函数只有被监视数据的地址发生改变时才被调用

2.reactive监视的数据默认开启深度监视，也就是student里面的name和age会被监视到

以改变姓名举例，watch监视到name地址值改变，回调函数被调用，但是我们监视的是student这个整体，它的地址值未曾改变(Object.assign只是覆盖了两个字段的值)，因此这时候拿到的newValue和oldValue都是修改后的值。

在实际开发中，我们一般只用到修改后的值，因此不需要太纠结。

  watch(person,(value)=>{
    console.log('我只要修改后的值',value)
  })

4.watch监视ref或reactive定义的对象类型里面的某个属性

 reactive

<template>
    <div class="person">
      <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年龄：{{ person.age }}</h2>
      <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changeC1">修改第一台车</button>
      <button @click="changeC2">修改第二台车</button>
      <button @click="changeCar">修改整个车</button>
    </div>
  </template>
  
  <script lang="ts" setup>
    import {reactive,watch} from 'vue'
  
    // 数据
    let person = reactive({
      name:'张三',
      age:18,
      car:{
        c1:'奔驰',
        c2:'宝马'
      }
    })
    // 方法
    function changeName(){
      person.name += '~'
    }
    function changeAge(){
      person.age += 1
    }
    function changeC1(){
      person.car.c1 = '奥迪'
    }
    function changeC2(){
      person.car.c2 = '大众'
    }
    function changeCar(){
      person.car = {c1:'雅迪',c2:'爱玛'}
    }
  </script>

 如果要监视的是对象里面的一个基本数据类型，要用getter方法

    // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
    watch(()=> person.name,(newValue,oldValue)=>{
        console.log('person.name变化了',newValue,oldValue)
    })

 如果监视的是对象里面的一个对象类型，可以用getter方法，也可以不用，如果需要监视这个被监视的对象的里面，还是要开启深度监视

// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
     watch(()=>person.car,(newValue,oldValue)=>{
        console.log('person.car变化了',newValue,oldValue)
    },{deep:true})

 

ref(同理reactive)

<template>
    <div class="person">
      <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年龄：{{ person.age }}</h2>
      <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changeC1">修改第一台车</button>
      <button @click="changeC2">修改第二台车</button>
      <button @click="changeCar">修改整个车</button>
    </div>
  </template>
  
  <script lang="ts" setup>
    import {ref,watch} from 'vue'
  
    // 数据
    let person = ref({
      name:'张三',
      age:18,
      car:{
        c1:'奔驰',
        c2:'宝马'
      }
    })
    // 方法
    function changeName(){
        person.value.name+="~"
    }
    function changeAge(){
      person.value.age += 1
    }
    function changeC1(){
      person.value.car.c1 = '奥迪'
    }
    function changeC2(){
      person.value.car.c2 = '大众'
    }
    function changeCar(){
      person.value.car = {c1:'雅迪',c2:'爱玛'}
    }


  </script>

  如果要监视的是对象里面的一个基本数据类型，要用getter方法

    watch(()=>person.value.name,(newValue,oldValue)=>{
    console.log("name改变了",newValue,oldValue)
    })

 监视对象里面的一个对象类型，开启深度监视

   watch(()=>person.value.car,(newValue,oldValue)=>{
    console.log("car改变了",newValue,oldValue)
   },{deep:true})

5.监视多个数据

统一用getter方法   然后开深度监视

<template>
    <div class="person">
      <h1>情况五：监视上述的多个数据</h1>
      <h2>姓名：{{ person.name }}</h2>
      <h2>年龄：{{ person.age }}</h2>
      <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changeC1">修改第一台车</button>
      <button @click="changeC2">修改第二台车</button>
      <button @click="changeCar">修改整个车</button>
    </div>
  </template>
  
  <script lang="ts" setup >
    import {reactive,watch} from 'vue'
  
    // 数据
    let person = reactive({
      name:'张三',
      age:18,
      car:{
        c1:'奔驰',
        c2:'宝马'
      }
    })
    // 方法
    function changeName(){
      person.name += '~'
    }
    function changeAge(){
      person.age += 1
    }
    function changeC1(){
      person.car.c1 = '奥迪'
    }
    function changeC2(){
      person.car.c2 = '大众'
    }
    function changeCar(){
      person.car = {c1:'雅迪',c2:'爱玛'} //因为这里是直接赋值 所以地址值改变了
    }
  
    // 监视，情况五：监视上述的多个数据
    watch(()=>[person.car,person.age],(newValue,oldValue)=>{
        console.log("car或age被修改",newValue,oldValue)
    },{deep:true})
  
  </script>

watchEffect

 官网：立即运行一个函数（相当于{immediate}），同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

说的通俗点就是watch的升级版，直接写你的代码逻辑,他会根据你用到的去监听，不需要你自己去告诉它你要监视哪些数据。

<template>
    <div class="person">
      <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
      <h2 id="demo">水温：{{temp}}</h2>
      <h2>水位：{{height}}</h2>
      <button @click="changePrice">水温+10</button>
      <button @click="changeSum">水位+10</button>
    </div>
  </template>
  
  <script lang="ts" setup>
    import {ref,watch,watchEffect} from 'vue'
    // 数据
    let temp = ref(0)
    let height = ref(0)
  
    // 方法
    function changePrice(){
      temp.value += 10
    }
    function changeSum(){
      height.value += 10
    }
  
    /*
    // 用watch实现，需要明确的指出要监视：temp、height
    watch([temp,height],(value)=>{
      // 从value中获取最新的temp值、height值
      const [newTemp,newHeight] = value
      // 室温达到50℃，或水位达到20cm，立刻联系服务器
      if(newTemp >= 50 || newHeight >= 20){
        console.log('联系服务器')
      }
    })
    */
    // 用watchEffect实现，直接写你的代码逻辑,他会根据你用到的去监听
    //格式：watchEffect( ()=>{}    )
    const stopWtach = watchEffect(()=>{
      // 室温达到50℃，或水位达到20cm，立刻联系服务器
      if(temp.value >= 50 || height.value >= 20){
        console.log(document.getElementById('demo')?.innerText)
        console.log('联系服务器')
      }
      // 水温达到100，或水位达到50，取消监视
      if(temp.value === 100 || height.value === 50){
        console.log('清理了')
        stopWtach()
      }
    })
  </script>

c1tenj2
关注
vue3的computed属性和watch属性
weixin_56733569的博客
12-09 1301
关于vue3中computed和watch的用法
Vue3_2024_5天【vue2（3种）和vue3（5种）中watch的使用场景】watch、computed
qq_41930094的博客
03-05 737
watch概念：允许你在数据变化时执行特定的逻辑（方法），从而实现更复杂的数据处理和业务逻辑。
Vue3中的computed和watch属性
月光晒了很凉快的博客
11-22 965
简写写法（只实现了 get ）： 标准写法（可以实现 get 和 set 方法）： 完整的购物车案例： watchEffect 的返回值： watchEffect 的 onCleanup 回调参数：watchEffect 还有一个回调参数，此参数它也是一个函数，作用是清理副作用。 监听一个变量值的变化： 监听多个变量值的变化： 监听对象中具体的值： 监听ref的引用对象（添加参数3）： 监听 reactive 定义的响应变量：
vue3中的computed和watch
jieyucx的博客
07-07 1656
Vue2中的计算属性是通过在Vue实例的computed选项中定义函数来创建的。计算属性会根据依赖的响应式属性进行缓存，只有当依赖的属性发生变化时，计算属性才会重新求值。在这个例子中，fullName就是一个计算属性，它依赖于firstName和lastName两个响应式属性。当firstName或者lastName的值发生变化时，fullName会重新计算。而在Vue3中，计算属性被重命名为"由计算值推导而来的属性"或者简称"计算值"。Vue3提供了一个新的API，使用computed。
Vue3的watch与computed
宇智波带土
01-08 1238
watch介绍 通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据，只要返回的结果没有发生变化, 那么计算属性就只会被执行一次。 Vue3写法 setup() { const name = ref('漩涡鸣人'); const {username, password} = toRefs(reactive({ username: '宇智波带土', password: 'zs1262597806' })) watch
Vue学习Day9案例
04-30
在这个"Vue学习Day9案例"中，我们重点关注`Src`目录及其子目录`Src_ajax_user`，这通常代表了一个Vue应用的数据获取和用户管理模块。在这个案例中，我们将学习如何通过Ajax技术，尤其是使用Vue.js的内置HTTP接口`...
Vue基础day3学习资料.zip
03-31
总的来说，"Vue基础day3学习资料.zip"提供了一套完整的Vue学习路径，从理论到实践，覆盖了Vue全家桶的基础知识。通过系统学习这些资料，学习者不仅可以掌握Vue的基本语法，还能建立起对Vue生态系统的初步认识，为...
Vue基础day4学习资料.zip
03-31
在"Vue基础day4学习资料.zip"中，我们可以找到一系列资源来深入理解和掌握Vue的基础知识，特别是Vue全家桶（包括Vuex状态管理、Vue Router路由管理等）的基础内容。 首先，"day04_Vue01-基础语法3.ppt"很可能包含了...
Vue基础day1学习资料.zip
03-31
"Vue基础day1学习资料.zip"这个压缩包包含了丰富的资源，适合初学者系统地学习Vue的基础知识。让我们逐一解析其中包含的内容。 首先，"2-案例"文件夹可能包含了一些实际的Vue应用示例，这些案例可以帮助你理解Vue的...
Vue基础day2学习资料.zip
03-31
首先，"day02_Vue01-基础语法3.ppt"可能是一个关于Vue基础语法的演示文稿。这通常会覆盖以下内容： 1. **Vue实例**：Vue应用程序的核心是Vue实例，它通过`new Vue()`创建。实例可以包含数据、方法、生命周期钩子等...
Vue3里computed与watch使用
qq_37635012的博客
10-11 1530
Vue3里computed使用，Vue3里watch使用
Vue3的computed和watch
m0_56713342的博客
01-23 699
watch监控ref数据，深层次监控属性 ，必须手动开启deep:true，不能省略，省略相当于默认 false。watch监控reactive数据，假如需要深层次监控属性需要手动开启deep:true或省略。3.立刻调用 (第三个参数位一个对象，里面可放immediate:true)4.深度监听 (第三个参数位一个对象，里面可放 deep:true)第一个参数监听的数据构成的数组 ​ 第二个参数回调函数。第一个参数：监听的数据 第二个回调函数。基于现有的数据计算出新的数据。1 . 侦听一个数据。
深度解析Vue3中的computed和watch
最新发布
xllllll___的博客
03-27 1446
点击改变sum的值</button>console.log('sum的值改变了',newValue,oldValue);})<button @click="changeName">修改我的名字</button><button @click="changeAge">修改我的年龄</button><button @click="changeAll">修改我的全部信息
vue3中的computed与watch
weixin_47594808的博客
07-31 786
vue3中的响应性API
【vue3】关于watch与computed的用法看这个就ok
嗨，朋友你好！我是前端领域的工作者
04-06 2987
vue3中计算属性computed与侦听器watch的使用方法
Vue 3 Watch 和 computed
人生代码 ---- 公众号
12-16 477
computed 与 watchcomputed使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。<template> <...
vue3中的computed、watchEffect、watch
weixin_45304198的博客
10-05 719
一，computed 用法一：传入一个getter函数 setup() { const firstName = ref('李') const lastName = ref('华') // 传入一个getter函数 const fullName = computed(() => firstName.vaule + lastName.value); } 用法二：传入一个对象，对象包含getter/setter setup() { const firstName = ref('李') cons
【Vue3】计算属性computed和监听属性watch
叶子yes的博客
01-23 2506
监听ref或者reactive定义的对象类型数据中的某个属性时，如果该属性值不是对象类型，需要写成函数的形式，如果是对象类型，可以直接写，也可以写成函数的形式。监视ref定义的对象类型数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视。② watch要明确指出监视的数据，watchEffect不用明确指定监视的数据，用到哪些属性，就监视哪些属性。它需要返回一个值，返回的值就是该计算属性的值。① 都能监听响应式数据的变化，不同的是监听数据变化的方式不同。定义的对象中的属性，
Vue3系列——computed、watch
霖hero
05-17 696
计算属性computed是依赖于使用它的数据，当数据发生变化时，自定义方法重新调用执行一次计算属性，监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。在示例代码中，我们定义了list数组和计算属性，计算属性返回值通过变量名为computedlist来接收，通过setTimeout定时器将list数组值改变，当3秒后，list数组增加9、10元素。注意：计算属性中不应该有其他操作，例如异步请求、修改dom；避免直接修改计算属性的值，计算属性应该是只读的；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值