vue3快速入门
文章平均质量分 61
温情key
坚持创作 收获壮硕
展开
-
vue3快速入门-Tree shaking
是一种通过清除多余代码方式来优化项目打包体积的技术, 也就是找出使用的代码。 是基于ES6模板语法 、,主要是借助模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量在 中,我们使用全局 API (如:) 是不需要我们手动去导入的。如下:也就是说,Vue全局API不是通过模块系统导入的,结合介绍,就可以知道在中,就算我们的代码没有使用到全局API,在项目打包的时候,这些全局API相关的依然会被一同打包进来,这样就导致了项目存在太多的无用代码。所以,引入了特性,对全局API进行分块,原创 2022-07-02 14:49:59 · 1068 阅读 · 0 评论 -
vue3快速入门-自定义hook
什么是自定义hook- 是封装的可复用的功能函数- 自定义hook类似于vue2中的`mixin`技术- 可以使用vue3的`composition API`原创 2022-06-25 16:37:30 · 517 阅读 · 0 评论 -
vue3快速入门-watch与watchEffect
侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。 默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。侦听源,这个参数可以为以下几种:侦听源发生变化时调用的回调函数, 这个回调函数接收三个参数:、以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用,可以用来清除无效的副作用,例如等待中的异步请求。当侦听多个来源时,回调函数接受两个数组,分别对应侦听源数组中的新值和旧值。这个可选参数是一个对象,支持以下选项:立即执行传入的一个函数,同时响应式追踪其依赖,并原创 2022-06-24 15:07:04 · 370 阅读 · 0 评论 -
vue3快速入门-computed计算属性
1. 简化代码,直接计算得出想要使用的数据2. 计算属性可以依赖多个数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。3. 计算属性相比methods方法会进行缓存,如果多次使用时,计算属性只会调用一次;而方法会使用一次则调用一次,因此计算属性相对而言性能更好。4. 接收计算属性结果的变量可以直接在HTML模板中通过插值语法使用......原创 2022-06-22 16:06:39 · 563 阅读 · 1 评论 -
vue3快速入门-生命周期
vue2和vue3生命周期对比表由于输出的实在太多,截图不便于理解,所以建议自己动手试试。原创 2022-06-21 21:08:58 · 398 阅读 · 0 评论 -
vue3快速入门-ref获取元素DOM
在 Vue2.X 中是先在 标签上定义 然后 来获取原创 2022-06-21 15:34:20 · 717 阅读 · 0 评论 -
vue3快速入门-Suspense(异步组件处理)
允许我们的应用在等待时渲染一些前置内容,提高用户体验加载异步组件,在异步组件加载完成成并完全渲染之前 会先显示 插槽的内容 其实是插件 的简写, 不给,则为默认插槽 在路由配置文件按需引入vue3定义异步组件需要通过 来进行显示的定义示例踩坑版父组件子组件踩雷:默认情况下,我们使用 defineAsyncComponent 定义的所有组件都是可挂起的。这意味着,如果组件的父类中存在 Suspense,它将被视为该 Suspense 的异步依赖项。我们的组件加载、错误、延迟原创 2022-06-18 17:39:38 · 669 阅读 · 0 评论 -
vue3快速入门-Fragment(片段)
组件的模板结构中出现多个标签时,需要使用根标签进行包裹。 组件的模板结构中出现多个标签时,可以不用根标签。这是因为vue3会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用...原创 2022-06-17 22:22:28 · 452 阅读 · 0 评论 -
vue3快速入门-Teleport(瞬移组件)
是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。如果我们嵌套在 Vue app 内的某个组件内部,那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用 就可以方便的解决组件间 css 层级问题我们将模态内容包装在 teleport 组件中,还需要指定一个 属性,为该属性分配一个查询选择器,以标识目标元素。子组件-teleportto属性为bodyto属性为#d1:::......原创 2022-06-17 16:11:26 · 2241 阅读 · 0 评论 -
Vue3快速入门-toRaw 与 markRaw
toRaw: 将一个响应式对象转为普通对象markRaw: 标记一个对象,让它永远不会转为响应式对象,返回值是这个对象本身可以看到第二个log 已经转换为了普通对象,也就是说,它就已经具有响应性了。第三个log 使用 reactive 依旧没把他转换为响应式对象,因为它已经被标记为不可响应对象。...原创 2022-06-17 14:00:00 · 315 阅读 · 1 评论 -
Vue3快速入门-shallowRef 与 shallowReactive
shallowRef 类似 ref,不同的是, shallowRef 只处理基本类型的响应式,不处理对象类型的响应式。shallowReactive 类似 reactive,不同的是, shallowReactive 只处理对象最外层属性的响应式。也就是浅响应式原创 2022-06-17 12:00:00 · 391 阅读 · 0 评论 -
Vue3快速入门-readonly 与 shallowReadonly
readonly- 深度只读数据- 获取一个对象响应式、普通对象或 ref对象 并返回它们的 **只读代理对象**。- 访问任何层级属性都是只读的,不能修改。原创 2022-06-17 10:00:00 · 190 阅读 · 0 评论 -
Vue3快速入门-toRef
作用: 为原响应式对象上的某个属性创建一个 ref 对象, 二者内部操作的是同一个数据值, 更新时二者是同步的语法: 应用: 使用父组件传递的props数据时,要引用props的某个属性且要保持响应式连接时就很有用。toRefFather.vuetoRefChild.vue初始化:更新后:......原创 2022-06-17 09:00:00 · 215 阅读 · 0 评论 -
Vue3快速入门-toRefs
reactive响应式对象数据如果通过 es6的三点(…)运算符解构就会消除响应性toRefs 这个方法可以把 reactive 响应式对象,转化为 普通对象,且这个普通对象的每个属性都是 Ref 对象,这样的话保证了 reactive 的每个属性还是响应式的,我们还可以把每个属性进行分解使用,这样在组件就不用 可以直接使用属性了也就是解构响应式对象数据而不丢失响应性可以看到name和age属性都是Ref对象,这样我们就可以直接在模板使用了...原创 2022-06-16 21:04:14 · 180 阅读 · 0 评论 -
Vue3快速入门-reactive
作用: 接收一个普通对象然后返回该普通对象的响应式代理对象语法:原创 2022-06-16 21:02:53 · 580 阅读 · 0 评论 -
Vue3快速入门-ref
作用: 将数据转换为响应式,一般用于基础数据类型语法:原创 2022-06-16 20:59:45 · 181 阅读 · 0 评论 -
Vue3快速入门-setup
setup 是 Composition API 的入口,setup 的存在就是为了让我们能够使用composition api。所有的 函数都在 setup 中使用, 只在初始化时执行一次。执行时间在 beforeCreate 之前,即组件创建之前; 这就意味着在执行 setup 时尚未创建组件实例,因此在 setup 选项中没有 this。在模版中需要使用的数据和函数,需要在 setup 返回 setup(props, context) / setup(props, {attrs, slots, emi原创 2022-06-16 20:56:49 · 2012 阅读 · 0 评论