VUE3学习二

教程视频

【尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程】https://www.bilibili.com/video/BV1Za4y1r7KE?p=67\&vd_source=f1bd3b5218c30adf0a002c8c937e0a27

零 环境搭建

学习环境

1. windows10
2. node 18
3. vue3

创建项目

npm create vue@latest

选项中是1是 0否

一 组合API&选项API

选项式

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

组合式

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
}

二 setup

基本概念

<script setup>
console.log('hello script setup')
</script>

代码会被编译成组件 setup() 函数的内容。

这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用，import 导入的内容也会以同样的方式暴露。

组合式写法（推荐写法）：

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
import { capitalize } from './helpers'
</script>

<template>
  <button @click="log">{{ msg }}</button>
  <div>{{ capitalize('hello') }}</div>
</template>

选项式写法

<script>
export default {
    name:"",
    setup(){
        const msg="Hello"
        function log(){
            console.log(msg)
        }
        return {
            msg,
            log
        }
    }
}
</script>

vue3 setup 中未设置this，使用时不可使用this。

以上代码未使用ref或者reactive，所以数据不是响应式，页面显示不会自动更新。

setup优先于所有生命周期钩子之前执行。

setup在选项式写法中（不推荐）：

• 可以和data、methods同时存在。
• data通过this能取到setup中的数据，因为setup最先被执行。
• setup里读取不到data、methods中的数据。

setup语法糖<script setup>，作用域内不用写return。

同一页面，script标签lang属性要一致。

同一script标签中使用方法要一致，即只有选项式或只有组合式。

定义组件名称

默认组件和文件名相同。

1 使用插件式

<script lang="ts">
export default {
    name:"test",
}
</script>

<script setup lang="ts">
console.log('hello script setup')
</script>

2 使用插件 vite-plugin-vue-setup-extend

npm i vite-plugin-vue-setup-extend

<script setup namd="test">
console.log('hello script setup')
</script>

3 使用defineOptions

仅在 3.3+ 中支持

<script setup>
import { defineOptions } from 'vue'
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
  // 其他自定义属性...
})
</script>

三 ref&reactive

ref

接受一个内部值，返回一个响应式的、可更改的 ref 对象。

此对象只有一个指向其内部值的属性 value。

const count = ref(0)
console.log(count.value) // 0

count.value = 1
console.log(count.value) // 1

将基本类型数据变为RefImpl对象，即响应式对象，仅能通过value改变值。

可以控制作用域内哪些是响应式数据。

模板中自动取value属性。

ref可定义基本类型数据和对象类型数据，ref底层对象类型数据使用reactive处理。

修改数据

修改 value属性，都保持响应式对象。

必须通过value修改。

let obj1 = ref({test1:"test1"})
let num1 = ref(1)

num1.value+=1
obj1.value={test1:"test2"}
obj1.value.test1="test3"//保持响应式对象

num1 = ref(2)//失去响应式

reactive

返回一个对象的响应式代理。

仅可定义对象类型数据，其中ref对象会被解包。

响应式转换是"深层"的：它会影响到所有嵌套的属性。

一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。

const obj = reactive({ count: 0 })
obj.count++

const count = ref(1)
const obj2 = reactive({ count })
// ref 会被解包
console.log(obj2.count === count.value) // true

// 会更新 `obj2.count`
count.value++
console.log(count.value) // 2
console.log(obj2.count) // 2

// 也会更新 `count` ref
obj2.count++
console.log(obj2.count) // 3
console.log(count.value) // 3

将对象类型数据变为Proxy对象，即响应式对象。

修改数据

重新分配对象，失去响应式。

let obj =reactive({test1:'test1'})
function updateobj(){
    let obj2 = {test1:"test2"}
    obj = obj2//重新定义（分配）对象
}

保持响应式对象

let obj =reactive({test1:'test1'})
function updateobj(){
    let obj2 = {test1:"test2"}
    Object.assign(obj, obj2);
    obj.test1="test3"
}

使用原则

• 需要基本类型响应式对象，用ref
• 需要对象类型响应式对象，层次不深，用ref、reactive都行
• 需要对象类型响应式对象，层次深，推荐使用reactive
• 表单多推荐使用reactive

四 toRef&toRefs

toRef

可以将值、refs 或 getters 规范化为 refs (3.3+)。

const state = reactive({
  foo: 1,
  bar: 2
})

// 双向 ref，会与源属性同步
const fooRef = toRef(state, 'foo')

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

使用场景：解构reactive对象，解构一个对象属性。

toRefs

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。

每个单独的 ref 都是使用 toRef() 创建的。

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型：{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// 这个 ref 和源属性已经"链接上了"
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

使用场景：解构reactive对象，同时结构多个对象属性。