# vue3测试 **Repository Path**: gufukang/vue3-test ## Basic Information - **Project Name**: vue3测试 - **Description**: vue3小demo - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-12-29 - **Last Updated**: 2022-02-10 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # learnvue3 ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). # learnVue3 思想笔记 >随笔记录 ### 1、简介开始 + vue3更好支持 ts + 创建vue3的项目 通过版本超过 4.0 的vue.cli + 更快 + 了解vue3加vite构建项目 + 模板内部可以没有根标签 ### 2、组合式api ### 3、setup 方法 + 所有数据均放到setup之中（数据包括变量及方法） + vue3中使用this 为undefined 2和3不建议混用 ### 4、ref + 依然可以通过ref获取组件或者dom + 直接声明的变量数据更改后没有响应式；将比普通数据变为响应式使用ref函数处理 + 返回一个引用实现的对象 + .value 得到数据 + 模板不用.value 直接写 简单数据类型还是用了对象劫持 get set 复杂数据类型使用ref劫持 内部还是使用了proxy实现 ### 5、reactive + 直接使用reactive处理基本数据类型 是不被允许的 + 通过proxy实现对象的响应式 + 不用使用.value去拿真实的值了 + 将值处理为响应式的对象 通过接口拿到的数据是不是要处理成可响应式的数据？ 源对象加工成代理对象 ### 6、响应式原理 #### 1、vue2 + 数据劫持 + 存在问题但是 可以使用 this.$set(添加的对象,对象属性,值) + 直接对对象内部新加属性或者给数组内部根据索引的方式改值 便不具有响应式 + 对象及数组均可使用this.$set方法解决 #### 2、vue3 + 简单数据类型使用ref；复杂数据类型使用proxy + proxy中的 get和set 是实现响应式的根本 + 可以捕获到属性的增删改查 ### 7、setup内部传入的参数 > prop 外部组件（父组件）传入的参数 props配置项同样在vue3中是适用的 > context 上下文 emits 所有传递过来的方法 ### 8、计算属性 使用vue3中的计算属性 > 1.引入 2 computed(()=>{}) 简写仅可以读取，全写为具有get和set；set可以得到修改的值 ### 9、watch监听器 > 1、引入 2、watch(监听的值，执行函数（新值，旧值），配置项首次触发以及是否深度监听) 多个使用数组 3、监视某个对象中的值；watch中监听的值使用函数表示，无入参return需要监听的对象中的值；监听多个对象下的值也可以；使用多个箭头函数；这种监视的deep可以生效；其余不生效是因为当监视的是reactive对象数据的时候vue给默认强制开启了deep: true; 当监视数据为ref对象基本数据类型时：不用.value; watch仅监视ref对象或者reactive对象；当使用ref处理复杂数据类型的时候，将.value才是proxy生成的reactive对象；才能被监视proxy； ### 10、watchEffect > 监听的是回调函数中所用到的值；用到的数据改变了就会执行函数体 computed注重的是return ；watchEffect注重的是过程：内部有值发生改变时就重走一下过程 ### 11、生命周期 >setup onbeforeMounted onMounted onbeforeUpdate onUpDated onbeforunMounted onunMounted 大差不差；取消销毁概念转为卸载；其实一样 + 组合式api的概念：在setup中使用的钩子函数；配置项函数就是在setup同级也就是之前data、methord的位置；就叫配置项函数 ### 12、hooks函数 > 文件命名为函数用途 usePoint 将组合式api进行封装 实现复用代码 ### 13、toRef > 将一个数据变成ref对象 解决简单数据类型赋值后失去响应式-引用数据问题 使用后会将简单数据类型改为响应式数据也就是refImpl对象 桥接；赋值后的值还是访问的之前的对象里的值 ### 14、shallowReactive shallowRef （了解） > shallowReactive只考虑第一层的响应式 shallowRef 只能处理简单数据类型的响应式；传入对象不具有响应式 ### 15、readonly shallowReadonly > 不允许修改 readonly(接受一个响应式的数据)；处理之后数据就不可以修改了 shallowReadonly(接受一个响应式的数据)；处理之后数据就不可以修改了 ### 16、toRow > toRow 将响应式的数据改为原始数据类型 > markRow 将响应式的数据改为原始数据类型,不将数据添加响应式；markRow(data) 一下然后return 就可以在模板中使用了；节省性能 ### 17、customRef >对响应进行控制;自定义ref ``` customeRef(()=>{ return { get(){ } set(){ } } }) trigger() // 通知vue去渲染模板 ``` ### 18、provide和inject >实现祖孙间通信；跨级组件 ``` 通过provide提供；使用inject接收 祖组件提供，引入provide provide(数据) 后代组件接收，引入inject(数据) 父子传递便只需要使用props ``` ### 19、部分api > ``` 引入 isRef，isReactive，isReadonly，isProxy console.log(isRef(num)) // 返回值为true或者false ``` ### 20、组合式api优势 > vue2中功能中的data，method放在一起 vue3中的功能的相关变量及方法放在一起，相关功能的代码放在一起； ### 21、vue3中的新增组件 >fragment组件，减伤嵌套，减少内存占用，不用有一个根标签了， >teleport传送组件 ``` to:闪现到body中，不用担心任何一层有个定位，就会如果组件需要相对body就会出问题 这个组件还是可以在某一个组件中使用 但是不用担心多层嵌套导致定位后相对定位出现的问题；将某个dom元素群从很深的结构中抽出 ``` > 动态引入/异步引入 import {defineAsyncComponent} from 'vue' defineAsyncComponent(()=>import('../child)) 静态引入： import child form '../child' 使用异步引入网络较慢时不用加载child完成才展示；当内部嵌套的很深时如果内部还没加载完可以先展示外层组件 ### 22、将全局的api放到了app上，vue.xxx 放到了 app.xxx ## todolist 案例 暂定需求 > 上面输入框 中间展示list 下面清除选中及展示已完成数量和未完成数量 list中item组件及是一行数据 状态 内容 删除 添加内容 删除已完成