Vue3 学习笔记 (基础)

作者: 夹板儿孩 | 来源:发表于2022-11-01 22:54 被阅读0次

Vue3 学习笔记（基础）

看视频学习的笔记，自用
bilibili 尚硅谷禹神

setup 一切的开始

组建中所用到的：数据、方法等都应当配置在 setup 中。没有写到 setup 中的函数或者属性在组件模板中无法访问。
vue2 中的 data、computed等生命周期组件在 vue3 中可以写，但是不建议写
setup 中没有 this
通常情况下 setup 组件是不能够返回 promise 的
当组件返回 promise 时，要确定被引用时，要使用 defineAsyncComponent 接收组件，并且使用 Suspense 来报过组件进行配合（后面文档有记载）

<script lang="ts">
export default {
  setup() {
    const name = '张三'
    const age = 18
    function sayHello() {
      alert("hello world")
    }
    return {
      name,     // 抛出 name 属性
      age,      // 抛出 age 属性
      sayHello  // 抛出 sayHello 函数
    }
  }
}
</script>
<template>
  <h1>人员信息</h1>
  <h2>姓名: {{ name }}</h2>
  <h2>年龄: {{ age }}</h2>
  <button @click="sayHello">sayHello</button>
</template>

ref 动态响应

ref 函数的作用是用于动态渲染。

ref 会给普通的值类型属性更改为 RefImpl 对象，并且实现 get、set 两个函数。
ref 会吧引用类型的对象更改为 Proxy 对象

使用 ref 时，除了在模板中，都需要操作实际的 value 否则无效

<script lang="ts">
import {ref} from "vue";

export default {
  setup() {
    const name = ref('张三')  // 使用 ref 来定义一个属性
    const age = ref(18)      // 使用 ref 来定义一个属性
    const job = ref({        // 使用 ref 来定义一个对象 ref 实际是通过 ES6 中的 Proxy 实现了这个对象的代理，进行了数据内部的处理
      type: '前端工程师',
      year: 2
    })

    function sayHello() {
      alert("hello world")
    }

    function changeInfo() {
      name.value = '李四' // 更改 name 属性的值
      age.value = 30     // 更改 age 属性的值
    }

    function changeJob() {
      const work = job.value    // 获取到 job 的这个对象
      work.type = '全栈'        // 更改 job 中 type 这个属性
      work.year = 10           // 更改 job 中 year 这个属性
    }

    return {
      name,
      age,
      job,
      sayHello,
      changeInfo,
      changeJob
    }
  }
}
</script>
<template>
  <h1>人员信息</h1>
  <h2>姓名: {{ name }}</h2>
  <h2>年龄: {{ age }}</h2>
  <h1>工作信息</h1>
  <h2>岗位类型: {{job.type}}</h2>
  <h2>工作年限: {{job.year}}</h2>
  <button @click="sayHello">sayHello</button>
  <br><br>
  <button @click="changeInfo">改变信息</button>
  <br><br>
  <button @click="changeJob">更换工作</button>
</template>

reactive 动态响应对象

定义一个 对象类型 的响应式数据（基本类型不要用 reactive）
reactive 定义的响应式数据是深层响应的
基于 ES6 的Proxy 实现。通过代理对象操作源对对象内部数据进行操作

<template>
  <h1>人员信息</h1>
  <h2>姓名: {{ name }}</h2>
  <h2>年龄: {{ age }}</h2>
  <h1>工作信息</h1>
  <h2>岗位类型: {{job.type}}</h2>
  <h2>工作年限: {{job.year}}</h2>
  <button @click="sayHello">sayHello</button>
  <br><br>
  <button @click="changeInfo">改变信息</button>
  <br><br>
  <button @click="changeJob">更换工作</button>
</template>
<script lang="ts">
import {ref, reactive} from "vue";

export default {
  setup() {
    const name = ref('张三')
    const age = ref(18)
    // 使用 reactive 来初始化对象
    const job = reactive({
      type: '前端工程师',
      year: 2
    })

    function sayHello() {
      alert("hello world")
    }

    function changeInfo() {
      name.value = '李四'
      age.value = 30
    }

    function changeJob() {
      // 直接更改属性，不需要再 .value 了
      job.type = '全栈'
      job.year = 10
    }

    return {
      name,
      age,
      job,
      sayHello,
      changeInfo,
      changeJob
    }
  }
}
</script>

Proxy 代理

Proxy 是 Es6 提供的对象代理函数。在在做对象时直接操作 Proxy 的代理，它会同步修改原来对象中的属性。使用代理可以完成对对象的原生监听

Proxy 参数 ( 源对象，操作对象)

如：

    const person = {
      name: '张三',
      age: 18
    }
    const student = new Proxy(person, {})
    student.name = '李四' // 修改代理中的name属性 相当于 person.name = '李四'
    console.log(student)  // Proxy {name: '李四', age: 18}
    console.log(person) // {name: '李四', age: 18}

get / set / delete


    const person = {
      name: '张三',
      age: 18
    }

    const student = new Proxy(person, {
      get(target, propName: string): unknown {
        console.log(`读取了 student 中的 ${propName} 属性`)
        return Reflect.get(target, propName)
      },
      set(target, propName: string, value): boolean {
        console.log(`写入了 student 中的 ${propName} 值为 ${value}`)
        return Reflect.set(target, propName, value)
      },
      deleteProperty(target, propName: string): boolean {
        console.log(`删除了 student 中的 ${propName} 属性`)
        return Reflect.deleteProperty(target, propName)
      }
    })

    student.name = '李四' // 修改代理中的name属性 相当于 person.name = '李四'
    console.log(student.name)  // 李四
    // 读取了 student 中的 name 属性
    console.log(student)  // Proxy {name: '李四', age: 18}
    Reflect.deleteProperty(student, 'age')  // 删除 age 属性
    console.log(JSON.stringify(student)) // Proxy {name: '李四'}
    console.log(JSON.stringify(person)) // {name: '李四'}

computed 计算属性

需要从 vue 中进入 computed 函数

import { reactive, computed } from "vue";

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

export default {
  setup() {
    const person = reactive({
      firstName: '张',
      lastName: '三'
    })
    // 设置一个叫 fullName 的计算属性
    Reflect.set(person, 'fullName', computed({
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(value: string) {
        const split = value.split('-')
        person.firstName = split[0]
        person.lastName = split[1]
      }
    }))
    return {
      person
    }
  }
}
</script>

<template>
  <div>
    姓: <input type="text" v-model="person.firstName">
    名: <input type="text" v-model="person.lastName">
    全名: <input type="text" v-model="person.fullName">
  </div>
</template>

watch 监听

需要从 vue 中心如 watch 函数

注意:

reactive 定义的对象在使用 watch 监听时无法正确的获得 oldVal

vue3 目前版本中 watch 监听对象是默认深度监听的，且 deep 也无法关闭

watch 的三个参数

被监听的值/对象
监听触发回调函数。两个回调参数 ( 改变后的值/对象，改变前的值/对象 )
配置项。两个配置 {deep: boolean, immediate: boolean} ; deep: 深度监听; immediate: 初始触发监听

<script lang="ts">
import { ref, reactive, watch } from "vue";

export default {
  setup() {
    let sum = ref(0)
    let msg = ref(0)
    const person = reactive({
      firstName: '',
      lastName: '',
      fullName: '',
      job: {
        year: 10
      }
    })
    // 1. 普通监听
    watch(sum, (newVal, oldVal) => {
      console.log(newVal, oldVal)
      msg.value = newVal
    })
    // 2. 普通监听
    watch(msg, (newVal, oldVal) => {
      console.log(newVal, oldVal)
      sum.value = newVal
    })
    // 3. 组合监听
    watch([sum, msg], (newVal, oldVal) => {
      console.log(newVal, oldVal) // newVal: ['sum', 'msg'],  oldVal: ['sum', 'msg']
    }, { immediate: true }) // 初始触发 与 vue2 中 watch 里的 immediate 一致
      
    // 4. 监听 reactive 生成对象中的某一个属性
    watch(() => person.job.year, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
      
    // 5. 监视的是 reactive 对象中某个对象属性时，超过 1 层的属性对象将会无法监听，需要添加 deep:true 配置才有效
    watch(() => person.job, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    }, {deep: true})  
      
    // 6. 监听 ref 生成的对象
    const person2 = ref({
      firstName: '',
      lastName: '',
      fullName: '',
      job: {
        year: 10,
        work: {
          address: '南京'
        }
      }
    })
    // 当被监听的是一个由 ref 生成的对象时，那么监听时需要监听它实际的值
    watch(person2.value, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    return {
      person,
      sum,
      msg
    }
  }
}
</script>

<template>
  <div>
    sum: <input type="text" v-model="sum">
    smg: <input type="text" v-model="msg">
      
    姓: <input type="text" v-model="person.firstName">
    名: <input type="text" v-model="person.lastName">
    全名: <input type="text" v-model="person.fullName">
    工作年限: <input type="text" v-model="person.job.year">
  </div>
</template>

watchEffect 监听

<script lang="ts">
import { ref, reactive, watch, watchEffect } from "vue";

export default {
  setup: function () {
    const person = reactive({
      firstName: '',
      lastName: '',
      fullName: '',
      job: {
        year: 10,
        work: {
          address: '南京'
        }
      }
    })

    // watchEffect 默认开启了 immediate: true
    // watchEffect 不需要指定监视谁，它更类似于一个computed，在函数中用到的属性一旦发生改变，都将会触发这个函数
    // watchEffect 更注重程序的执行过程，没有返回值
    watchEffect(()=> {
      const name = person.fullName
      const address = person.job.work.address
      console.log("watchEffect 被执行了")
    })

    return {
      person,
    }
  }
}
</script>

<template>
  <div>
    姓: <input type="text" v-model="person.firstName">
    名: <input type="text" v-model="person.lastName">
    全名: <input type="text" v-model="person.fullName">
    工作年限: <input type="text" v-model="person.job.year">
    工作信息: <input type="text" v-model="person.job.work.address">
  </div>
</template>

setup 进阶

setup 提供了两个参数

props 属性
context 上下文

属性有 attrs， emit， expose， slots

attrs: 值为对象，收录了所有 props 中没有声明但被传递的属性。相当于 Vue2 中的 $attrs

emit: 分发自定义时间的函数。相当于 Vue2 中的 $emit

expose:

slots: 收到的插槽内容。相当于 Vue2 中的 $slots

hook

hook 本质是一个函数，用于复用可用代码

hook 文件 .../usePoint.ts

import {reactive, onMounted, onUnmounted} from "vue";

export default function () {
const point = reactive({
x: 0,
y: 0
})

function onclick(event: MouseEvent) {
point.x = event.pageX
point.y = event.pageY
}

onMounted(() => window.addEventListener('click', onclick))
onUnmounted(() => window.addEventListener('click', onclick))
return point
}

引入 hook 的文件

<script lang="ts">
import usePoint from "@/hooks/usePoint";

export default {
  setup: function () {
    const point = usePoint()
    return {
      point
    }
  }
}
</script>

<template>
  <div>
    鼠标位置 x {{point.x}} y {{point.y}}
  </div>
</template>

toRef 函数

<script lang="ts">
import { reactive, toRef } from "vue";

export default {
  setup: function () {
    const person = reactive({
      job: {
        year: 10,
        work: {
          address: '南京'
        }
      }
    })
    // 使用 toRef 可以将Proxy中的属性与变量名进行桥接，更改被桥接的名字或者这个变量名时，两边都会进行同样的更改
    let address = toRef(person.job.work, 'address')
    return {
      person,
      address
    }
  }
}
</script>

<template>
  <div>
    我的地址: <input type="text" v-model="address">
    person 中的地址: <input type="text" v-model="person.job.work.address">
  </div>
</template>

toRefs 函数

 <script lang="ts">
import { reactive, toRefs } from "vue";

export default {
  setup: function () {
    const person = reactive({
      job: {
        year: 10,
        work: {
          address: '南京'
        }
      }
    })
    // toRefs 可以将对象中的第一层全部 toRef 出来为一个新的对象
    const obj = toRefs(person)
    return {
      person,
      ...toRefs(person) // 直接展开这个对象，那么即可以立即在模板中直接使用
    }
  }
}
</script>

<template>
  <div>
    我的地址: <input type="text" v-model="job.work.address">
    person 中的地址: <input type="text" v-model="person.job.work.address">
  </div>
</template>

不常用函数

readonly 只读函数

对象、值一旦使用了 readonly 函数，那么这个对象、值将不能再被修改。只能被读取

<script lang="ts">
import { reactive, readonly } from "vue";

export default {
  setup: function () {
    // 浅层次的 reactive 声明一个对象。这种声明方式只会考虑第一层数据的响应式。超过一层的数据改变时将不会改变源对象
    let person = reactive({
      firstName: '',
      lastName: '',
      fullName: '',
      job: {
        year: 10,
        work: {
          address: '南京'
        }
      }
    })
    person = readonly(person)
    return {
      person,
    }
  }
}
</script>

<template>
  <div>
<!--    下面都无法更改到源数据-->
    姓: <input type="text" v-model="person.firstName">
    名: <input type="text" v-model="person.lastName">
    全名: <input type="text" v-model="person.fullName">
    工作年限: <input type="text" v-model="person.job.year">
    工作信息: <input type="text" v-model="person.job.work.address">
    <br>
    <span>{{JSON.stringify(person)}}</span>
  </div>
</template>

shallowReactive、shallowRef、shallowReadonly

浅响应式。相当于弱化了的 reactive 和 ref

shallowReactive 只处理对象最外层的响应式
shallowRef 只处理基本的数据类型响应式，不进行对象的响应式处理
shallowReadonly 将对象的第一层设置为只读，其他可读

<script lang="ts">
import { shallowReactive, shallowRef } from "vue";

export default {
  setup: function () {
    // 浅层次的 reactive 声明一个对象。这种声明方式只会考虑第一层数据的响应式。超过一层的数据改变时将不会改变源对象
    const person = shallowReactive({
      firstName: '',
      lastName: '',
      fullName: '',
      job: {
        year: 10,
        work: {
          address: '南京'
        }
      }
    })
    return {
      person,
    }
  }
}
</script>

<template>
  <div>
    姓: <input type="text" v-model="person.firstName">
    名: <input type="text" v-model="person.lastName">
    全名: <input type="text" v-model="person.fullName">
    工作年限: <input type="text" v-model="person.job.year">
    工作信息: <input type="text" v-model="person.job.work.address">
    <br>
    <span>{{JSON.stringify(person)}}</span>
  </div>
</template>

toRaw 回归原始

reactive 生成的对象一旦被 toRaw 以后，就不在是 Proxy 代理对象了。也不再具有动态响应的作用

<script lang="ts">
import { reactive, toRaw } from "vue";

export default {
  setup: function () {
    // 浅层次的 reactive 声明一个对象。这种声明方式只会考虑第一层数据的响应式。超过一层的数据改变时将不会改变源对象
    let person = reactive({
      firstName: '',
      lastName: '',
      fullName: '',
      job: {
        year: 10,
        work: {
          address: '南京'
        }
      }
    })
    person = toRaw(person)
    return {
      person
    }
  }
}
</script>

<template>
  <div>
<!--    下面都无法更改到源数据-->
    姓: <input type="text" v-model="person.firstName">
    名: <input type="text" v-model="person.lastName">
    全名: <input type="text" v-model="person.fullName">
    工作年限: <input type="text" v-model="person.job.year">
    工作信息: <input type="text" v-model="person.job.work.address">
    <br>
    <span>{{JSON.stringify(person)}}</span>
  </div>
</template>

markRaw 标记原始

对象的某个属性被标记标记了原始以后，将不会被动态响应

<script lang="ts">
import { reactive, markRaw } from "vue";

export default {
  setup: function () {
    // 浅层次的 reactive 声明一个对象。这种声明方式只会考虑第一层数据的响应式。超过一层的数据改变时将不会改变源对象
    let person = reactive({
      firstName: '',
      lastName: '',
      fullName: '',
    })
    let job = {
      year: 10,
      work: {
        address: '南京'
      }
    }
    job = markRaw(job)
    Reflect.set(person, 'job', job)
    return {
      person
    }
  }
}
</script>

<template>
  <div>
    姓: <input type="text" v-model="person.firstName">
    名: <input type="text" v-model="person.lastName">
    全名: <input type="text" v-model="person.fullName">
<!--    下面都无法更改到源数据-->
    工作年限: <input type="text" v-model="person.job.year">
    工作信息: <input type="text" v-model="person.job.work.address">
    <br>
    <span>{{JSON.stringify(person)}}</span>
  </div>
</template>

响应式数据的类型判断

isRef: 检查一个值是否为 ref 对象

isReactive: 检查一个对象是否由 reactive 创建的响应式代理

isReadonly: 检查一个对象是否有 readonly 创建的只读代理

isProxy: 检查一个对象是否有 reactive 或者 readonly 方法创建的代理

感觉很重要，但是用的不多

customRef 自定义 ref 的实现

这是一个官方的实现案例，延迟更新新效果

<script lang="ts">
import { customRef } from "vue";
import { NodeJS } from "timers";

export default {
  setup: function () {

    function myRef(value:string) {
      let timer:NodeJS.Timeout = undefined
      return customRef((track, trigger) => {
        return {
          get() {
            track() // 1，告诉Vue跟踪这个值，使它每次变化都更新
            return value
          },
          set(newValue:string) {
            timer && clearTimeout(timer)
            timer = setTimeout(()=>{
              // 延迟更新
              value = newValue
              trigger() // 2. 通知Vue数据更新了
            }, 500)
          }
        }
      })
    }
    let name = myRef('你好啊')
    return {
      name
    }
  }
}
</script>

<template>
  <div>
    请输入: <input type="text" v-model="name">
    <br>
    输入内容为: {{name}}
    <br>
  </div>
</template>

provide/inject 后代组件传值

provide

// 父组件定义
import {provide} from 'vue';
export default({
  name: 'HomeView',
  setup() {
    let heirloom = ref('双鱼玉佩')
    // 通过 provide 将 car 传递给后代
    provide('heirloom', heirloom)
      
    return {
    }
  }
})

inject

<script lang="ts">
import {inject} from "vue";

export default {
  setup: function () {
    // 通过 inject 接收祖辈组件传值
    const heirloom = inject('heirloom')
    return {
      heirloom
    }
  }
}
</script>

<template>
  <div>
    <br>
    传家宝: {{heirloom}}
    <br>
  </div>
</template>

组件

teleport 传送组件

在这个组件内部写的所有组件都可以通过 teleport 的 to 属性传送到指定的位置去

如，这里传送到了 body 中

<script lang="ts">
import {inject, isRef, isReactive} from "vue";

export default {
  setup: function () {
    const car = inject('car')
    console.log(isRef(car))
    console.log(isReactive(car))
    return {
      car
    }
  }
}
</script>

<template>
  <div>
    <h1>Vue3</h1>
  </div>
  <teleport to="body">
    <div>传家宝: {{car}}</div>
    <div>传送到body去</div>
  </teleport>
</template>

如果想要传送到指定的 div 中，那么需要先在 index.html 中实现定义好这个div

如:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div class="dialog"></div> <!-- 传到这个div 中 -->
    <!-- built files will be auto injected -->
  </body>
</html>

<script lang="ts">
import {inject, isRef, isReactive} from "vue";

export default {
  setup: function () {
    const car = inject('car')
    console.log(isRef(car))
    console.log(isReactive(car))
    return {
      car
    }
  }
}
</script>

<template>
  <div>
    <h1>Vue3</h1>
  </div>
  <teleport to=".dialog">
    <div>传家宝: {{car}}</div>
    <div>传送到body去</div>
  </teleport>
</template>

Suspense 异步组件

用于需要从后台加载数据后才渲染的组件

<template>
  <div class="home">
    <Suspense>
<!--      suspense 提供了两个槽位
      default  是默认槽位，是代码正确运行后让用户看到的结果
      fallback 是代码异常或者加载缓慢时让用户看到的结果-->
      <template v-slot:default>
        <test-vue3></test-vue3>
      </template>
      <template v-slot:fallback>
        <div>加载中</div>
      </template>
    </Suspense>
  </div>
</template>
<script lang="ts">
// defineAsyncComponent 异步引入组件
import {defineAsyncComponent} from 'vue';

const TestVue3 = defineAsyncComponent(()=> import('@/components/TestVue3.vue'));
export default({
  name: 'HomeView',
  components: {
    TestVue3
  }
})
</script>

当组件是使用 defineAsyncComponent 来接收时，那么被使用的组件 setup 可以返回 promise

父组件

<template>
  <div class="home">
    <Suspense>
<!--      suspense 提供了两个槽位
      default  是默认槽位，是代码正确运行后让用户看到的结果
      fallback 是代码异常或者加载缓慢时让用户看到的结果-->
      <template v-slot:default>
        <test-vue3></test-vue3>
      </template>
      <template v-slot:fallback>
        <div>加载中</div>
      </template>
    </Suspense>
  </div>
</template>
<script lang="ts">
// defineAsyncComponent 异步引入组件
import {defineAsyncComponent} from 'vue';

const TestVue3 = defineAsyncComponent(()=> import('@/components/TestVue3.vue'));
export default({
  name: 'HomeView',
  components: {
    TestVue3
  }
})
</script>

子组件

<script lang="ts">
import {inject, isRef, isReactive} from "vue";

export default {
  setup: function () {
    const car = inject('car')
    console.log(isRef(car))
    console.log(isReactive(car))
    return new Promise((resolve, reject) => {
      setTimeout(()=> {
        resolve(1)
      }, 2000)
    })
  }
}
</script>

<template>
  <h1>Vue3</h1>
</template>

Vue3 学习笔记 (基础)

Vue3 学习笔记（基础）

setup 一切的开始

ref 动态响应

reactive 动态响应对象

Proxy 代理

get / set / delete

computed 计算属性

watch 监听

watchEffect 监听

setup 进阶

hook

toRef 函数

toRefs 函数

不常用函数

readonly 只读函数

shallowReactive、shallowRef、shallowReadonly

toRaw 回归原始

markRaw 标记原始

响应式数据的类型判断

感觉很重要，但是用的不多

customRef 自定义 ref 的实现

provide/inject 后代组件传值

组件

teleport 传送组件

Suspense 异步组件

End

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue3 学习笔记 (基础)

Vue3 学习笔记 （基础）

setup 一切的开始

ref 动态响应

reactive 动态响应对象

Proxy 代理

get / set / delete

computed 计算属性

watch 监听

watchEffect 监听

setup 进阶

hook

toRef 函数

toRefs 函数

不常用函数

readonly 只读函数

shallowReactive、shallowRef、shallowReadonly

toRaw 回归原始

markRaw 标记原始

响应式数据的类型判断

感觉很重要，但是用的不多

customRef 自定义 ref 的实现

provide/inject 后代组件传值

组件

teleport 传送组件

Suspense 异步组件

End

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue3 学习笔记（基础）