[ DAY 18 VUE3基础 | 青训营笔记]

14 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 18 天

常用的Composition API

初识setup

<template>
  <h1>一个人的信息</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <button @click="sayHello">click</button>
</template>

<script>

export default {
  name: 'App',
  setup(){
  //  数据
    let name = '张三'
    let age  = 18
    
    function  sayHello(){
      alert('我叫${name}')
    }

    return{
      name,
      age,
      sayHello
    }
  }
}
</script>

ref函数

响应式数据的修改

<template>
  <h1>一个人的信息</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <button @click="changInfo">click</button>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
  //  数据
    let name = ref('张三')
    let age  = ref(18)

    function changInfo(){
        name.value = '李四'
        age.value  =  48
    }

    return{
      name,
      age,
      changInfo
    }
  }
}
</script>

reactive函数

vue3响应式的实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <script type="text/javascript">
      //   源数据
      let person = {
        name:"张三",
        age:18
      }

      // 模拟vue3中的响应式的实现
      const p = new Proxy(person,{
        // 有人读取p的某个属性时调用
        get(target, p, receiver) {
          console.log(`有人读取了p身上的${p}属性`);
          return target[p]
        },
        // 有人修改p的某个属性时调用,或者给p追加某个属性时调用
        set(target, p, newValue, receiver) {
          console.log(`有人修改了p身上的${p}属性,我要去更新界面了`);
          target[p] = newValue
        },
        // 有人删除p的某个属性时调用
        deleteProperty(target, p) {
          console.log(`有人删除了p身上的${p}属性,我要去更新界面了`);
          return delete target[p]
        }
      })
    </script>

  </body>
</html>

reactive对比ref

computed

vue2中的计算属性的实现

<template>
  <h1>一个人的信息</h1><input text="姓" v-model="person.firstName" />
  <br><input text="名" v-model="person.lastName" />
    <br>
      <span>全名:{{fullName}}</span>
    </template>

<script>
  import {reactive} from "vue";
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Demo",
    computed:{
      fullName(){
        return this.person.firstName+'----'+this.person.lastName
      }
    },
    setup(){
      //  数据
      let person = reactive({
        firstName:'王',
        lastName:'杰'
      })
      return {
        person,
      }
    }

  }
</script>

<style scoped>

</style>

vue3中计算属性的实现

<template>
  <h1>一个人的信息</h1><input text="姓" v-model="person.firstName" />
  <br><input text="名" v-model="person.lastName" />
  <br>
  <span>全名:{{person.fullName}}</span>
</template>

<script>
import {computed, reactive} from "vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Demo",
  setup(){
  //  数据
  let person = reactive({
     firstName:'王',
     lastName:'杰'
  })
    //计算属性-------- 没有考虑计算属性被修改的情况
    // person.fullName = computed(()=>{
    //   return person.firstName+'---'+person.lastName
    // })
    //计算属性完整写法(考虑读和写)
    person.fullName = computed({
      get(){
        return person.firstName+'-'+person.lastName
      },
      set(value){
        let nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })
  return {
    person,
  }
  }

}
</script>

<style scoped>

</style>

watch和watchEffect

vue3生命周期

toRef和toRefs

用于将响应式对象中的某个属性提供给外部使用时。

响应式数据的判断

新的组件