vue3如何（Vue3学习笔记（1））

安装

//使用yarn构建 //安装yarn 需要管理员权限 sudo npm i yarn -g yarn create vite cd .. yarn yarn dev

目录结构

见名知义

四种语法范式

vue3中可以不需要根标签

选项式写法, vue2写法 , Vue3兼容vue2选项式写法,不推荐 选项写法都有组合API实现 组合式写法, 只使用setup ,相当于vue2中的created(),setup可以理解成是组件生命周期的第一阶段, <template> //在模版中使用ref响应数据时 不需要.value取值 </template> <script> impprt {ref} from vue export default( //组合式写法入口 setup(){ let msg = ref(hello) //num叫ref变量 ref对象 console.log(msg.value) // 在js中操作需要.value才能取到响应数据值 return {num} // setup中定义了响应式数据,要在模版中使用, 必须return出去 } ) <script> 选项式+组合式 不推荐 组合式语法糖写法 推荐 <script setup lang="ts"> import { ref } from vue; let num = ref(100) let add = ()=>{ num.value++ } </script> <template> <h1>组合式语法糖写法</h1> <h1 v-text="num"></h1> <button @click="add">+++</button> </template> <style scoped> </style>

hooks

抽离业务逻辑代码到单独的hook文件 定义一个函数 并return所有数据和方法 最后exprot出去,在组件中通过import 导入 ,调用该函数声明一个对象来接收所有数据和方法 //Surga.vue import useCount from ./hooks/useCount.ts let {num, add, sub} = useCount() //useCount.ts import { ref, reactive } from vue; function useCount() { let num = ref(100) let add = () => { num.value++ } let sub = () => { num.value-- } return{ num, add, sub } } export default useCount

setup用法

//定义在script标签上 不用return返回 语法糖 <script setup> //dosomething... </script> //定义在script 内部 需要return返回 <script> exprot default({ setup(){ const a = const fun = ()=>{} return {a,fun} } }) </script>

响应式 ref

ref操作基本数据类型(string,number,boolean) isRef 判断一个数据是否为ref对象 isRef(xxx) //返回true/false unRef 如果传递一个ref对象,得到ref对象的value值;如果传递一个非ref对象,得到数据本身 customRef 自定义ref <script setup > import {ref,customRef,onRenderTracked,onRenderTriggered} from vue let num = ref(100) let add = ()=>{num.value++} let sub = ()=>{num.value--} //自定义customRef let name = customRef((track,trigger)=>{ let value = return{ // 使用name时,调用get get(){ track() //当name被使用时,执行track(),调用onRenderTracked return value }, set(val){ trigger() //当name被修改时,执行trigger(),调用onRenderTriggered value = val } } }) //仅供在开发环境下,用于ref的变量调试 onRenderTracked((ev)=>console.log(name被访问了,ev)) onRenderTriggered((ev)=>console.log(name值被修改了,ev)) </script> <template> <h1>组合式API</h1> <h1 v-text="num"></h1> <button @click="add">+++</button> <button @click="sub">---</button> <input type="text" v-model="name"> </template> toRef 可以把reactive对象中的某个属性变成ref对象 // toRef 可以把reactive对象中的某个属性变成ref对象 let nameToRef = toRef(user,nickName) //nameToRef变成了一个ref对象, 该方法接收两个params, 对象 - 属性

shallowRef 和 ref() 不同             ，浅层 ref 的内部值将会原样存储和暴露 
  
 
  
 
  
 
  
 
  
 
  
 
 ，并且不会被深层递归地转为响应式             。只有对 .value 的访问是响应式的 
  
 
  
 
  
 
  
 
  
 
  
 
 。 triggerRef()

强制触发依赖于一个浅层 ref 的副作用













，这通常在对浅引用的内部值进行深度变更后使用













。 reactive isReactive(检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理 
  
  
  
  
  
  。) readonly isReadonly (只读对象的属性可以更改 
  
  
  
  
  
  ，但他们不能通过传入的对象直接赋值 
  
  
  
  
  
  
 。) isProxy 检查一个对象是否是由 reactive()             、readonly() 
  
 
  
 
  
 
  
 
  
 
  
 
 、shallowReactive() 或 shallowReadonly() 创建的代理

 


 


 


 


 


 


。 toRaw 变为原始对象 markRaw 标记为原始对象 shallowReactive shallowReadonly computed watch watchEffect watchEffect //{flush:pre} 最先执行 watchPostEffect //{flush:post} 最后 watchSyncEffect //{flush:sync} 按顺序同步执行,如果在pre前就先执行

生命周期 钩子函数

vue2中有8个周期 beforeCreate created 被setUp代替 在vue3中生命周期都是组合式API 都是以on开头 在v2中有beforeDestory/destroyed 在v3中onBeforeUnmount / onUnmounted 新增两个钩子函数 onRenderTracked/onRenderTriggered

onBeforeMount

defineProps 用法

defineEmits用法