Vue3前置知识点

---

1.计算属性 computed

掌握使用 computed 方法创建计算属性的方式。

计算属性是指基于现有状态派生出新的状态，现有状态发生变化，派生状态基于现在状态重新计算，在 Vue3 中通过 computed 方法创建计算属性。

computed 方法接收回调函数作为参数，基于回调函数中使用的响应式数据进行计算属性的创建，回调函数的返回值就是计算结果。

import { computed, ref } from 'vue';
export default {
  setup() {
    const num = ref(10);
    const result = computed(() => num.value * 2) //结果就是变成20 
    return { result }
  }
}

<template>{{ result }}</template>

案例: 在搜索框中输入名字,在现有的名字中查找,找到后列出名称列表.

import { ref, computed } from 'vue';
export default {
  setup() {
    const const names = ref([
      "林俊杰",
      "孙燕姿",
      "周杰伦",
      "张惠妹",
      "刘若英",
      "林宥嘉",
      "刘德华",
      "张韶涵",
      "周笔畅",
      "孙楠",
    ]);
    const serach = ref("");
    const filterNames = computed(() => {
      return names.vaue.filter((name)=>{
        return name.includes(search.value)
      })
    })
    return { search,filterNames }
  }
}

<template>
  <input type="text" v-model="search" />
  <ul>
    <li v-for="name in filterNames">{{ name }}</li>
  </ul>
</template>

---

2.监听状态watch

---

掌握watch方法监听响应式数据的方式

简单明了watch就是监听响应式数据的变化

使用watch方法监听基于ref创建的响应式数据(基本数据类型)

import { ref, watch } from 'vue';
export default { 
  setup() {
    const text = ref("")
    watch(text,(current,previous) => {
      console.log(current) //当前,也就是更新后的数据
      console.log(previous)// 之前的,也就是更新前的数据
    })
    return {text}
  }
}

<template><input type="text" v-model="text" /></template> //双向绑定数据,只要text 数据已发生改变

---

使用watch监听基于ref创建的响应式数据(引用数据类型)

import { ref,watch } from 'vue';
export default {
  name:"App",
  setup() {
    const person = ref({name:"张三"});
    const onClickHandler = () => {
      person.value.name = "李四"
    }
    watch(person.value,(current) => {
      console.log(current)
    })
  }
}

<template>
  <button @onclick="onClickHandler">
    {{person.name}}
  </button>
</template>

---

使用watch监听响应式数据内部的具体属性(基本数据类型)

import { ref,watch } from 'vue';
export default { 
  setup() {
    const person = ref({name:"张三"})
    watch(() => person.value.name,(current) => {
      console.log(current)
    })
    return {person}
  }
}

---

使用watch监听响应式内部的具体属性(引用数据类型)*

import { ref,watch } from 'vue';
export default {
  const person = ref({brand:{titke:"宝马"}})
  const changeBarndTitle = () => {
    person.value.brand.title = "奔驰"
  }
  watch(person.value.brand,(current) => {
    console.log(current)
  })
return {person, changeBrabdTitle}
}

---

使用watch监听基于reactive创建的响应式数据

import {reactive,watch} from "vue"
export default {
  setup() {
    const person = reactive({name:"张三"})
    const onClickHandler = () => {
      person.name = "李四"
    }
    watch(person,(current,previous) => {
      console.log(current)
    })
    return { person, onClickHandler }
  }
}

<template>
  {{person.name}}
  <button @click="onClickHandler">
    button
  </button>
</template>

---

使用watch监听多个值

import {ref,watch} from "vue"
export default {
  setup() {
    const firstName = ref("")
    const lastName = ref("")
    
    watch([firstName,lastName],current => {
      cosole.log(current) 只要数据已改变,不会同时改变数据，出发触发事件改变了数据才会同时输出
    })
    return { firstName, LastName}
  }
}

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>
​

---

使用watch监听数据在初始的时候执行一次

import {ref,watch} from "vue"
setup() {
  const firstName = ref("hello")
  const lastName = ref("world")
  watch([firstName,lastName],current=> {
    console.log(current)
  },{
    immediate:true
  })
  return { firstName, LastName}
}

---

3.监听状态watchEffect

掌握watchEffect监听数据方式

watchEffect 只关心数据的最新值，不关心旧值是什么，而且 watchEffect 默认会在初始时执行一次。

import { ref, watchEffect } from "vue";
​
export default {
  name: "App",
  setup() {
    const firstName = ref("");
    const lastName = ref("");
    watchEffect(() => {
      console.log(firstName.value);
      console.log(lastName.value);
    });
    return { firstName, lastName };
  },
};

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

\