vue3.0toRaw()、markRaw()、customRef()
摘要：1.toRaw和markRaw的使用意义（给reactive对象进行的添加属性都会自动给该属性添加响应式，当需要给reactive添加没有响应式的属性则使用） 2. toRaw和markRaw的使用示例（对其可以进行操作，只是响应式失效，区别于readOnly的不可以操作） 3.customRef：
阅读全文
posted @ 2022-12-30 17:48
12 2022 档案
vue3的shallowRef()、shallowReactive()和shallowReadonly()
摘要：1.shallowReactive()：使用shallowReactive转化的对象只有对象的第一层级有响应式。 2.shallowRef()：使用shallowRef转化的基本数据类型和使用ref没有差别，使用shallowRef转化的对象都会失去响应式。 3.shallowReadonly()：
阅读全文
posted @ 2022-12-30 13:54
vue3的hook函数
摘要：1.hook的定义（本质上是可以使用组合式API的封装好的函数） 2.使用示例：
阅读全文
posted @ 2022-12-29 16:59
vue3.0的生命周期
摘要：1.vue3的生命周期与vue2的不同点： 2.vue3的生命周期与vue2对应的点： 2.1beforeCreate和create相当于setup，因为不能写入setup生命周期内 2.2使用vue3的组合式API的生命周期，需要先按需引入才能在setup内进行使用（vue3的生命周期都加了on前
阅读全文
posted @ 2022-12-29 13:58
vue2和vue3响应式原理
摘要：1.vue2响应式（视频附带解决存在的问题，通过$set和vue的set、delete方法） https://www.bilibili.com/video/BV1Zy4y1K7SH?p=145&spm_id_from=pageDriver&vd_source=ce8f93194a63c57cca08
阅读全文
posted @ 2022-12-26 09:46
vs-code指令
摘要：1.运用场景：当你折叠某段代码时，你在该文件的其他地方敲写代码的时候折叠区域会自动展开。 解决方法：你#region和#endregion包裹该段代码后再折叠，则不会再此展开
阅读全文
posted @ 2022-12-15 17:28
vue3.0--<script setup>的使用
摘要：1.<script setup>的定义 <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势： 更少的样板内容，更简洁的代码。 能够使用纯 Typ
阅读全文
posted @ 2022-12-15 14:14
vue3.0--setup()
摘要：1.setup()定义： setup () 是vue3新增加的组件。vue3采用了组合式 API ，为了使用组合式API，我们需要一个入口，在vue3组件中，称之为setup。(简单点来说，就是vue2里面的data，method，computed，所有数据方法全写在setup里) 2.setup(
阅读全文
posted @ 2022-12-14 17:11
vue查漏补缺
摘要：1.动态参数属性：:[] <div :[atrr]="width:100%"></div> <script> export default{ data:()=>( { attrr：’class‘ } ) } </script> 2.computed相对于method的好处在于有缓存，减少执行次数。
阅读全文
posted @ 2022-12-14 13:50
搞清webpack、vite、vue-cli、create-vue的区别
摘要：1.要区分脚手架、构建项目、打包代码的概念 1.1脚手架：创建项目，选择性安装需要的插件，指定统一的风格，生成demo。（vue-cli和create-vue是由vue提供的脚手架，创建项目时提供选择是否要安装某些插件，最后会生成统一的项目结构和文件，@vue-cli3以上和create-vue是基
阅读全文
posted @ 2022-12-14 10:25
Vue3.0文档学习心得--依赖注入
摘要：1.provide():在祖先组件或整个应用 (通过 app.provide()) 提供一个值，可以被后代组件注入。(只要是后代就可以，不限制为孙组件） (1)第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。 (2)当使用 TypeScript 时，ke
阅读全文
posted @ 2022-12-13 17:25
使用v-html指令的禁忌和解决xss注入攻击
摘要：1.由于v-html会执行所有的html代码，因此会执行所有可能带危险的html代码 2.在使用v-html时为了防止XSS攻击，可以安装 npm install xss 插件，但是我们在渲染富文本编辑的文章时，使用XSS会把除了标签和内容之外的所有东西都给过滤掉，如calss，style过滤掉，那
阅读全文
posted @ 2022-12-13 09:54
Vue3.0文档学习心得--响应式工具
摘要：1.isRef：检查某个值是否为 ref。返回值是true或者false let foo: unknown //返回值是一个类型判定 (type predicate)，这意味着 isRef 可以被用作类型守卫。 if (isRef(foo)) { // foo 的类型被收窄为了 Ref<unknow
阅读全文
posted @ 2022-12-12 16:09
Vue3.0文档学习心得--响应式核心
摘要：1.ref():接受一个内部值，返回一个响应式的、可更改的 ref 对象.此对象只有一个指向其内部值的属性 .value。 使用实例： 1.1ref接收值 const count = ref(0) console.log(count.value) // 0 count.value++ console
阅读全文
posted @ 2022-12-12 12:05
前端 不同屏幕下页面的宽高不一致
摘要：引言：在设置相同的宽高的两个盒子，你在标准电脑屏幕下显示的是同宽同高的盒子，但是你在不标准的分辨率的电脑屏幕发现大小不一致。 原因在于项目设置自动转换会自动将class类设置的宽高转化为rem单位，但是在style是不会转换为rem单位的，导致大小不一样
阅读全文
posted @ 2022-12-08 15:22
