[JavaScript知识库][VUE3.0] 从0到0.00001 一起学习

使用官网推荐的vite搭建项目(需要node版本大于12.0.0)

# npm 6.x
npm init vite@latest HELLO-VUE3 --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest HELLO-VUE3 -- --template vue

进入HELLO-VUE3项目文件夹下安装一下依赖

# npm install

?根据package.json运行脚本

```cmd```
// 开发调试
# npm run dev
// or
// 打包生成dist文件
# npm run build

初步项目搭建完毕

VUE3.0的变动最开始接触的API莫过于setup了

setup的特点

• 无法在setup中使用this, 类似vue2的beforeCreate和created
• 在setup中可以使用vue2时候多种hook(见图1);
• 每个hook在setup中可以被多次调用,每个api使用前需要从vue中导入;
• ?setup有两个参数, 第一个props, 第二个context, context下有三个常用的api: attrs,emit, slots;
• 两种声明响应式的api: ref() 和 reactive();
• setup需要return一个对象, 对象的键值对是在setup中声明的响应式变量和方法

(图一)

ref和reactive的区别

两者都是创建响应式变量 区别在于ref只能创建一个 reactive可以批量创建

本质

ref(1) === reactive({value: 1})

    // ref part
    // 如果需要script中读写ref值需要对ref.value进行操作 请避免直接对ref进行赋值修改 如果会导致
    let refMsg = ref("I am refMsg");
    console.log(refMsg.value)
    refMsg.value = 'refMsg had changed'
    console.log(refMsg)
    refMsg.value = 'refMsg had changed second'
    refMsg.value = 'refMsg had changed third'
    // 不推荐ref赋予复杂类型(可以但不推荐)

// reactive part
// 为了避免对响应式变量进行修改 推荐使用const
const activeData = reactive({
      counter: 4,
      doubleConter: computed(() => activeData.counter * 2),    // 在声明reacitve的使用使用计算属性
      info: {
        age: 25,
        height: 185,
      },
    });


// 在setup函数的最后返回 acitveData
    return {
        activeData
    }


// 在html结构中使用actigve
<div>{{aciteiveData.age}}</div>
<div>{{aciteiveData.doubleConter}}</div>

// 如果不想要每次使用都带上activeData 可以使用toRef或者toRefs将将其转为ref类型
const ageRef = toRef(activeData, 'age')
// or
const { age: ageRef } = toRefs(activeDate)

// 即使通过toRef(s) activeData.age 和 ageRef 的地址依旧是一样的 一方改变 另一方也会随之改变

通过ref修改dom结构

// vue.template
<template>
    <div id="test" ref="desc"> </div?
</template>

// vue.script
// step 1 通过ref(null)一个与html结构同ref名字的变量
const desc = ref(null);

// step 2 通过 同名的ref变量的value可以获取到dom结构
const divRefDesc = desc.value
// divRefDesc 指向 #test 结构 可以对此进行dom操作
divRefDest.textContent = '在#test中显示的文本'

Teleport传送门

// vue.template
<button @click="turnTeleport">打开</button>
<teleport to="body">
  <div v-if="showTeleport">
    我是一个传送门
   <button @click="turnTeleport">关闭</button>
  </div> 
</teleport>


// vue.script setup()
const showTeleport = ref(false)
const turnTeleport = () => {
    showTeleport.value = !showTeleport.value
}

return {
    showTeleport,
    turnTeleport
}

通过组件teleport和其属性to="father path"可以在father path下面创建一个跨文件的组件

例如我在A组件撰写teleport, 可以将teleport放置到B组件的特定位置

留心: father path还是有要求 不能比撰写teleport的组件还晚的dom节点

例如?

<A></A>

<B></B>

<C></C>

如果在B中撰写teleport,那father path需要放在A 放在C会报错Cannot read property 'nextSibling' of null?