vue3知识点总结（四）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章vue3知识点总结（三）中，我们学习了vue3的知识点，包括toRef函数、toRefs函数、computed函数等相关知识点。今天，在这篇文章中，我们将继续学习vue3，包括watch函数、ref 属性、vue中废弃了过滤器等相关知识点。

watch函数

watch函数，是用来定义侦听器的。

watch函数可以监听： 1、监听ref定义的响应式数据 2、监听多个响应式数据数据 3、监听reactive定义的响应式数据 4、监听reactive定义的响应式数据，某一个属性 5、深度监听 6、默认执行

当你需要监听数据的变化就可以使用watch：监听一个ref数据：第一个参数是需要监听的目标。第二个参数是改变后触发的函数。

watch也可以监听多个数据的变化。

需要注意的是，此时监听对象中某一个属性的变化，例如：obj.name，需要写成函数返回该属性的方式才能监听到。

<template>
  <div class="container">
    <div>
      <p>count的值：{{count}}</p>
      <button @click="add">改数据</button>
    </div>
    <hr>
    <div>
      <p>{{obj.name}}</p>
      <p>{{obj.age}}</p>
      <p>{{obj.brand.name}}</p>
      <button @click="updateName">改名字</button>
      <button @click="updateBrandName">改品牌名字</button>
    </div>
  </div>
</template>
<script>
import { reactive, ref, watch } from 'vue'
export default {
  name: 'App',
  setup () {
    const count = ref(0)
    const add = () => {
      count.value++
    }

    // watch(count, (newVal,oldVal)=>{
    //   console.log(newVal,oldVal)
    // })


    const obj = reactive({
      name: 'ls',
      age: 10,
      brand: {
        id: 1,
        name: '宝马'
      }
    })
    const updateName = () => {
      obj.name = 'zs'
    }
    const updateBrandName = () => {
      obj.brand.name = '奔驰'
    }
    // 2. 监听一个reactive数据
    watch(obj, ()=>{
      console.log('数据改变了')
    })

    watch(()=>obj.brand, ()=>{
      console.log('brand数据改变了')
    },{
      // 5. 需要深度监听
      deep: true,
      // 6. 想默认触发
      immediate: true
    })

    // 3. 监听多个数据的变化
    // watch([count, obj], ()=>{
    //   console.log('监听多个数据改变了')
    // }) 


    // 4. 此时监听对象中某一个属性的变化 例如：obj.name 
    // 需要写成函数返回该属性的方式才能监听到
    // watch(()=>obj.name,()=>{
    //   console.log('监听obj.name改变了')
    // })

    return {count, add, obj, updateName, updateBrandName}
  }
}
</script>

ref 属性

获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开。单个元素：先申明ref响应式数据，返回给模版使用，通过ref绑定数据。遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模版使用，通过ref绑定这个函数

获取单个DOM或者组件。

<template>
  <div class="container">
    <!-- vue2.0 获取单个元素 -->
    <!-- 1. 通过ref属性绑定该元素 -->
    <!-- 2. 通过this.$refs.box获取元素 -->
    <!-- <div ref="box">我是box</div> -->
    <!-- vue2.0 获取v-for遍历的多个元素 -->
    <!-- 1. 通过ref属性绑定被遍历元素 -->
    <!-- 2. 通过this.$refs.li 获取所有遍历元素  -->
    <!-- <ul>
      <li v-for="i in 4" :key="i" ref="li">{{i}}</li>
    </ul> -->

    <!-- 单个元素 -->
    <div ref="dom">我是box</div>
    <!-- 被遍历的元素 -->
    <ul>
      <li v-for="i in 4" :key="i" :ref="setDom">第{{i}}LI</li>
    </ul>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. 获取单个元素
    // 1.1 先定义一个空的响应式数据ref定义的
    // 1.2 setup中返回该数据，你想获取那个dom元素，在该元素上使用ref属性绑定该数据即可。
    const dom = ref(null)
    onMounted(()=>{
       console.log(dom.value)
    })
    return {
        dom
    }
  }
}
</script>
<style scoped lang="less"></style>

获取v-for遍历的DOM或者组件。首先，定义一个空数组，接收所有的LI。然后，定义一个函数，往空数组push DOM

    const domList = []
    const setDom = (el) => {
      domList.push(el)
    }
    onMounted(()=>{
      console.log(domList)
    })
    return {dom, setDom}

vue中废弃了过滤器

在vue2.0中是可以使用过滤器的。然而在vue3.0中不能使用过滤器，直接使用函数进行替代过滤器。

以下是使用函数来格式化日期的例子。这个函数将返回已经被格式化的日期。

<template>
  <h3>{{ formatTime(now) }}</h3>
  <h3>{{ formatTime(other) }}</h3>
  <hr />
</template>

<script>
import moment from 'moment'
export default {
  setup() {
    // 过滤器
    const now = new Date()
    const other = new Date('2020-11-12 12:00:00')
    const formatTime = (value) => {
      return moment(value).format('YYYY-MM-DD')
    }
    return {
      now,
      formatTime,
      other,
    }
  },
}
</script>