Vue3
PrototypeONE
广东工业大学,信息工程专业,腾讯实验班成员,大三在校学生。现在的学习方向从前端转向了大数据和人工智能,在机器学习、大数据处理等技术方面有一定的研究,同时课程原因对计算机视觉也有一定的了解。目前有读研的想法,希望在大三这一年能继续努力,无论在学业、竞赛还是技术学习上都有所进步。大家一起卷起来!
展开
-
06_customRef自定义Hooks
使用customRef自定义Hooks在前几节中我们提到了customRef,并进行了简单的介绍,下面拿一些例子来说明如何使用customRef自定义Hooks创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数,该函数接收 track 和 trigger 函数作为参数,并且应该返回一个带有 get 和 set 的对象。下面展示一个最简单的例子myReffunction myRef(value) { return customRef((track, trigg原创 2022-05-15 14:34:13 · 317 阅读 · 0 评论 -
05_vue3使用vuex
vue3使用vuex安装vuexvue3 创建项目时勾选vuex,会自动生成一个store文件夹自带一个index.js如果构建项目时没勾选vuex,之后在单独安装vuex会报错,因为版本不兼容、这时候就可以用vue add vue-next这个命令会把项目中的一些依赖自动升级成支持vue3的版本e.gindex.js:// 引入import { createStore } from "vuex";import axios from 'axios';export default c原创 2022-05-15 14:17:51 · 212 阅读 · 0 评论 -
04_Vue3其他新的组件
新组件Fragment 片段在Vue2中:组件必须有一个根标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层级,减小内存占用Teleport 瞬移Teleport 提供了一种干净的方法,让组件的html在父组件界面外的特定标签(很可能是body)下插入显示<!--这样div会在body里面--><Teleport to = "body"> <div> hhhhhh原创 2022-05-15 14:17:03 · 102 阅读 · 0 评论 -
03_比较vue3和vue2的数据代理
比较vue3和vue2的数据代理vue2的响应式核心对象:通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)数组:通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持Object.defineProperty(data,'count',{ get () {} set () {}})问题对象直接新添加的属性或删除已有属性,界面不会自动更新直接通过下标替换元素或更新length,界面不会自动更新arr[1] = {}原创 2022-05-15 14:15:54 · 343 阅读 · 0 评论 -
02_Vue3新增API与Hooks
使用Vue3的组合API封装的可复用的功能函数自定义hook的作用类似于vue2中的mixin技术自定义Hook的优势:很清楚复用功能代码的来源,更清楚易懂需求1:收集用户鼠标点击的页面坐标新建一个hook文件保存下面的代码import {//初始化坐标 const x = ref(- 1) const y = ref(- 1) //点击事件的回调函数 const clickHandler =(event) => {原创 2022-05-15 14:14:48 · 535 阅读 · 0 评论 -
01_初始化vue3.0项目
使用脚手架创建vue create xxx然后根据提示选择配置 vue3+typescript使用vite创建vite是一个由原生ESM驱动的web开发构建工具。在开发环境下,基于浏览器原生ES imports 开发他做到了本地快速开发启动,在生产环境下,基于Rollup进行打包快速的冷启动,不需要等待打包操作;即时的热模块更新,替换性能和模块数量的解耦让更新飞起;真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。npm init vite-app xxxcd xxx原创 2022-05-14 19:00:51 · 196 阅读 · 0 评论