vue3
DOM曼珠沙华
学如逆水行舟,不进则退
展开
-
vue3+ts实现todolist功能
先看一下实现效果:可以看到内部实现的内容有enter输入,单项删除,全选,以及删除选中项等功能具体在实现前需要常见有ts的vue3项目项目创建具体项目创建 就是 vue create 项目名称在创建后,选择的时候有vue2和vue3的选择,第三项是自定义,在自定义时需要选中ts(选择的键分别是向下键和空格键)在创建项目之后,先运行,查看是否可运行TodoList实现目录结构:运行文件:App.vue组件:components下的文件...原创 2021-08-31 00:37:00 · 3186 阅读 · 3 评论 -
vue3的toRefs函数及ref函数
toRefs函数把一个响应式对象转换成普通对象,该普通对象的每个 property 都是一个 ref应用: 当从合成函数返回响应式对象时,toRefs 非常有用,这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用问题: reactive 对象取出的所有属性值都是非响应式的解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性<template> <div> <h2&...原创 2021-08-22 17:06:43 · 3714 阅读 · 0 评论 -
vue3的自定义hook函数
使用Vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 需求1: 收集用户鼠标点击的页面坐标 这里先看一下大体项目结构:这里的hooks下的文件是示例代码,public内的是测试数据在启动项目后,测试public的data文件内的数据,App.vue<template> <div> ...原创 2021-08-21 14:24:58 · 1696 阅读 · 0 评论 -
vue2和vue3生命周期对比
下面的是vue2和3的生命周期对比,vue2生命周期 vue3生命周期与 2.x 版本生命周期相对应的组合式 APIbeforeCreate-> 使用setup() created-> 使用setup() beforeMount->onBeforeMount mounted->onMounted beforeUp...原创 2021-08-18 17:57:03 · 3418 阅读 · 0 评论 -
vue3的计算属性和监听及watch和watchEffect区别
三者区别: computed函数: 与computed配置功能一致 内部只有一个方法的时候是getter 有getter和setter watch函数 与watch配置功能一致 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次 通过配置deep为true, 来指定深度监视 watchEffect函数 不用直接指定要监视的数据, 回..原创 2021-08-18 11:43:50 · 527 阅读 · 0 评论 -
Vue3的reactive与ref的细节对比
reactive与ref是Vue3的 composition API中2个最重要的响应式API ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式) 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象 ref内部: 通过给value属性添加getter/setter来实现对数据的劫持 reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据 ref的数据操作: 在js中要.value,原创 2021-08-17 17:51:18 · 421 阅读 · 0 评论 -
vue2.0与vue3的响应式
vue2的响应式核心:对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截) 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持Object.defineProperty(data, 'count', { get () {}, set () {}})问题 对象直接新添加的属性或删除已有属性, 界面不会自动更新 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {} 所以,这..原创 2021-08-13 17:17:18 · 187 阅读 · 0 评论 -
vue3.0了解
项目创建vue-cli脚手架安装## 安装或者升级npm install -g @vue/cli## 保证 vue cli 版本在 4.5.0 以上vue --version## 创建项目vue create my-project基础默认的2和3选择中是没有typescript的,如果需要使用typescript,需要选择自定义的东西,按向下的箭头和空格键进行选中,完成后enter,后续选中3.x,后面默认即可vite构建项目npm init vite-app <..原创 2021-08-12 15:26:37 · 146 阅读 · 0 评论