Vue3使用入门、优点相比Vue2有什么优点？diff算法的提升-vue2是全量对比，vue3新增了静态标记静态提升-vue2不管是否参与更新都会重新创建再渲染，vue3不参与更新的元素在渲染时直接复用。hoistStatic->SSR优化，静态绑定class，id不再做更新处理时间侦听器缓存ssr渲染更好的ts支持-vue2部分支持，vue3覆盖（新增Fragment、Teleport、S
Vue3学习（第二天）一、vscode创建vue3模板1.打开vscode点击左下角设置按钮，点击配置用户代码片段2.点击vue.json，把模板输入。二、响应式基础(ref()和reactive())1.ref()函数2.reactive()三、computed计算属性四、watch侦听器1.侦听一个ref()：2.侦听多个时使用数组：3.深层侦听五、watchEffect高级侦听器停止侦听器
转载
2024-07-09 21:12:53
324阅读
一、单文件组件<script setup><script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。 使用方法： 要使用这个语法，需要将 setup attribute 添加到script 代码块上：<script setup>
console.log('hello script setup')
</script
搭建Vue 环境1 下载 node.jsnode.js 中文网 https://nodejs.org/zh-cn/cn/ 下载合适的安装包2 配置环境 （安装时系统自动配置环境变量）进入系统环境变量界面选择系统变量 path 点击新建查看是否有node.js 的安装路径3 查看版本查看 node 版本命令：node -v查看 npm 版本命令 npm - v4 安装淘宝镜像，有利于加快下载速度np
转载
2024-09-21 08:46:08
293阅读
简述再写插件之前，首先我们要弄清楚什么是插件？插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制，一般有下面几种：添加全局方法或者属性。添加全局资源：指令 / 过滤器 / 过渡等通过全局混入来添加一些组件选项添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。一个库，提供自己的 API，同时提供上面提到的一个或多个功能。Vue 插件是对 Vue 全局功能的
参考：GitHub - briefness/fabric-region: 基于fabric.js的一个demoFabric.js 用法总结（在vue中使用时，因为this的指向不同，所以在Fabric.js方法内部，this是无法使用指向外部的值的）这只是我在使用fabric.js的过程中的一些总结，文章底部有一个fabric入门的链接，新手入门可以先看一下，适合新手canvas.setBackg
转载
2024-05-06 17:03:21
2131阅读
并不是所有的js文件都可以直接在webpack中使用。这些文件可能不支持模块（module）格式，甚至完全没有使用模块（module）。webpack提供了几种loaders(装载机)来解决这些文件如何在webpack中使用。 这个示例使用require来保证他们（的代码量）短小。通常你需要在你的webpack的config文件中配置这些loaders(装载机)。详情见Using loaders（
Vue学习笔记安装方法将https://unpkg.com/vue@3中的代码保存到项目目录下的lib文件夹中的vue.js中，在使用时引入即可。简单入门案例实现步骤 在页面中引入vue框架的核心文件 创建一个div标签，该标签要被Vue控制(挂载点) 使用Vue 对象调用createApp方法来创建Vue应用实例，再调用mount方法将应用挂载到页面上( div标签中)data方法用来配置数据
转载
2024-10-03 15:32:13
102阅读
vue3的优势：Vue 是目前国内开发最火的前端框架之一react, vue, angular的下载趋势Vue3性能更高，体积更小Vue的compositionAPI(组合式API)可以 更好的代码复用，方便构建大型项目对TS的支持比较好社区生态已经逐步完善组件（插件）名称官方地址官方地址ant-design-vuehttps://antdv.com/docs/vue/introduce-cn/a
转载
2024-08-12 20:55:34
108阅读
安装 JSX 插件在 Vue2 中要想使用 jsx 开发，需要安装 @vue/babel-preset-jsx 等插件，之后在 babel 里指定即可，详细可以参考下面的 Vue2 GitHub 文档Vue2：GitHub 文档 —— Babel Preset JSX最近在使用 Vue3，突然想用 jsx 进行开发部分页面，顺便记录一下，也可以参考下面的 Vue3 GitHub 文档Vue3：Gi
转载
2023-10-24 08:37:56
264阅读
一、什么是jsx在 JavaScript 里面写 HTML 的语法，就叫做 JSX，算是对 JavaScript 语法的一个扩展.（在vue3项目中相当于单文件组件，.vue）使用的是jsx语法二、jsx语法1.插值。与 vue 模板语法中的插值一样，但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表达式，比如：2 + 2，user.firstName，
转载
2023-07-21 22:24:22
265阅读
v-for中的key是什么作用？在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。 官方中对key的作用解释：key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销
转载
2024-02-02 11:41:40
91阅读
1、Vue3简介1.1、Vue3带来了什么1.性能的提升Vue3与Vue 2相比，在包大小（使用 tree-shaking 时减轻多达 41%）、初始渲染（速度提高多达 55%）、更新（多达 133% 更快）和内存使用（最多减少 54%）。打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟
转载
2023-10-23 19:59:39
180阅读
创建Vue3项目方式一：
使用vue-cli：vue的脚手架----->创建vue项目----->构建vue项目----->前端工具链
创建方式还是和之前一样，Vue版本要选择Vue3的版本
方式二：
使用vite创建：
vite：https://cn.vitejs.dev/
：npm create vue@latest
转载
2024-06-24 23:02:55
282阅读
在绝大多数情况下，Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下，我们真的需要用到 JavaScript
转载
2023-12-14 09:18:57
113阅读
在绝大多数情况下，Vue 推荐使用模板<template>语法来创建应用。在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚拟 DOM。然而在某些使用场景下，我们真的需要用到 JavaScript
转载
2023-12-14 11:04:16
89阅读
Vue3 特殊属性：key,ref,isvue3 特殊属性：keyrefis key期望值：number | string特殊属性key主要用于提示Vue的虚拟DOM算法在区分新节点列表和旧节点列表时识别VNodes。没有key的时候，Vue使用一种算法来最小化元素移动，并尽可能就地修补/重用相同类型的元素。使用key，它将根据键的顺序变化对元素重新排序，而key不再存在的元素将总是被删
转载
2023-11-13 23:17:50
137阅读
1、hookVue3 的 hook函数 相当于 vue2 的 mixin，不同在于 hook 是函数，其使用目的是为了复用代码，让setup中的逻辑更加清楚易懂。使用示例：在 src 目录下建立一个 hooks 文件夹，声明一个用于存放需要复用的代码的 js 文件，如下：文件内容如下：import {reactive,onMounted,onBeforeUnmount} from 'vu
转载
2024-03-03 09:03:58
201阅读
Vue3 Diff 算法与key先来看看官方的解释
key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes；如果不使用Key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；官方的解释对于初学者来说并不好理解，比如下面的问题：什么是新旧nodes
转载
2024-01-21 08:31:59
132阅读
模板指令组件上 v-model 用法已更改，替换 v-bind.synckey 属性Vue 3.x 不建议在 v-if/v-else/v-else-if 的分支中使用 key，如果非要使用，请设置唯一的key值。Vue 3.x 可以将 key值 设置在template 上 (Vue2.x 需要将key值设置到子节点上)v-if 与 v-for 的优先级对比2.x 版本中在一个元素上同时使用 v-i
转载
2024-02-26 10:34:59
93阅读
