Rockandrollman的博客

Vue3 其它API suspense组件 全局API转移到应用对象上

使用代码补全功能创建代码结构

Vue3 其它API Teleport 传送门

Vue3 其它API customRef

Vue3 其它API toRow和markRow

Vue3 其它API readonly和shallowreadonly

Vue3 其它API shallowref shallowreactive shallowref和ref的区别 shallowreactive和reactive的区别

Vue3 组件通信 作用域插槽

Vue3 组件通信 插槽 slot

Vue3 组件通信 provide和inject

Vue3 组件通信 $refs $parent

Vue3 组件通信 $attrs

Vue3 组件通信 v-model 封装组件 组件源码 v-model原理

Vue3 组件通信 emmit 任意组件通信

删除了node_modules目录以后，重新执行pnpm -install命令。打包前先执行启动命令，让项目启动一下，然后再执行打包命令。

Vue3 通过自定义事件实现子传父

Vue3 组件通信，props实现子传父，父传子

Vue3 Pinia $subscribe localStorage的用法 Store的组合式写法

Vue3 Pinia的getters属性

Pinia 修改数据

Pinia Vue3状态管理工具

Vue3 Pinia 符合直觉的Vue.js状态管理库

Vue3 路由的历史记录 如何不允许浏览器前进后退 在函数中使用路由切换组件 路由的重定向

路由组件传递props参数

路由路径中的参数

Vue3路由 参数 解构赋值

一般放到pages或view目录。

路由 Vue3

把一个功能的所有数据和方法写到同一个ts文件里。命名规范：useXxx，小驼峰。在每一个hooks中，都可以写onMounted、computed等属性，互不干扰。体现出了组合式AI的优势，一个功能的所有代码聚合在一起。

Vue3生命周期

/</</importfromimportfrom'vue'importfrom'@/types'letid'1'name'张一'age61id'2'name'张二'age62id'3'name'张三'age63</.app;box-shadow;;padding;</

新建一个ts文件，在里面定义一个接口id:string,age:number在vue文件中引入这个ts文件let person:PersonInter={id:'1',name:'张三',age:60}</script>id:string,age:number//一下两种任选其一，自定义类型在vue组件中引入自定义类型，并定义一个该类型的响应式数据id : '1' , name : '张一' , age : 61 } , {

假设有一对父子组件，如果父组件和子组件中存在id相同的标签，会产生冲突。通过id获取标签会获取到先加载那个标签。在子组件Person中，使用defineExpose，定义哪些变量可以被父组件使用。通过打印ref标记的组件标签，可以看到，只能获取到a和b，获取不到c，在父组件App中，引入了子组件Person。因为c没有定义在defineExpose中。并使用ref标记了Person组件标签。

执行pnpm i （需要安装pnpm），或者执行npm，npm可能会比较慢。用vscode打开项目。

watchEffect的回调方法里，用到了哪个属性，就监视哪个属性。

监视sum，当值大于等于10时，停止监视。

根据姓和名获取全名，并且姓的首字母大写。

相当于把person对象中的所有属性，拆分成单个响应式数据name和age。

不同点1ref定义的响应式数据，取值时需要先 .value不同点2替换整个对象时，方法不一样ref： car1.value = {brand:‘奔驰’,price:200}reactive：用Object.assign()方法，替换对象中所有属性的值let car1 = ref({brand:'奔驰',price:100})let car2 = reactive({brand:'奥迪',price:100})//不同点1//不同点2。

/ import Child from './components/Child'//静态引入。等待异步组件时渲染一些额外内容，让应用有更好的用户体验。