Vue3学习笔记

最新推荐文章于 2025-05-11 23:25:30 发布

原创最新推荐文章于 2025-05-11 23:25:30 发布 · 689 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #笔记

一、创建Vue3工程

(1）基于vite创建

ctrl+shift+`打开vscode终端

如何始终以管理员身份打开 PowerShell 或命令提示符。

总结：

vite项目中，index.html是项目的入口文件，在项目最外层。

加载index.html后，vite解析<script type="module" src="xxx">指向的JavaScript。

vue3中是通过createApp函数创建一个应用实例。

（2）vue3核心语法

setup函数中的this是undefined。

setup的返回值也可以是一个渲染函数。

<script setup>
  let a=666
</script>
相当于======>
setup(){
  let a=666
return {a}
}

自定义组件名字，需要安装插件（npm i vite-plugin-vue-setup-extend -D）

①ref创建：基本类型的响应式数据

import { ref } from 'vue'

let xxx=ref(初始值)

使用xxx.value。

Vue3报错无法找到模块xxx，xxx隐式拥有 “any“ 类型_找不到“event-emitter”的类型定义文件。程序包含该文件是因为: 隐式类型库 "ev-优快云博客

②ref对比reactive

ref可以定义基本类型，对象类型响应式数据

reactive只能定义对象类型的响应式数据

区别：

1.ref创建的变量必须使用.value（可以使用vue-offical插件自动添加.value）

2.reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换)

③toRefs与toRef

作用：将一个响应式对象中的每一个属性，转换为ref对象

备注：toRefs与toRef功能一致，但toRefs可以批量转换

// 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')

④computed

v-model：双向绑定

⑤监视

ref监视对象类型的数据，监视的是对象的地址值，若想监视对象内部的数据，要手动开启深度监视。

注意：

若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象。

若修改整个ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。

watch(参数一，参数二，参数三)

参数一：被监视的数据

参数二：监视的回调

参数三：配置对象（deep，immediate等等...)

reactive的监视默认是深度的。

监视ref或reactive定义的对象类型的数据中的某个属性：

若该属性不是对象类型，需要写成函数形式；

若该属性还是对象类型，可直接编，也可直接写成函数，建议写成函数

注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

⑥watch与watchEffect的区别

1.watch实现
watch([temp,height],(value)=>{
    let[newTemp,newHeight]=value
    if(newTemp>=60||newHeight>=80){
        console.log('给服务器发请求');
        
    }
})
2.watchEffect实现
watchEffect(()=>{
    if(temp.value>=60||height.value>=80){
        console.log('给服务器发请求');
    }
})

都能监听到响应式数据的变化，不同的是监听数据的方式

watch：要明确指出监视的数据

watchEffect：不用明确指出监视的数据（函数中用到哪些属性，就监视哪些属性）

⑥标签的ref属性

作用：用于注册模板引用

用于普通DOM标签上，获取的是DOM节点

用在组件标签上，获取的是组件实例对象。

⑦回顾vue2的生命周期

创建，挂载，更新，销毁（其中包括八个钩子，分别是这四个阶段的前后操作）

⑧vue3的生命周期