vue3
公孙元二
如果你看到这句话,幸运值+1
展开
-
vue3-setup的两个注意点
在vue2中父组件传属性给子组件子组件接收属性如果没有接收,则需要在$attrs里才能收到,缺点是没有对类型作限制,以及使用的时候名字比较长使用的时候名字比较长父组件在子组件里使用插槽打印插槽里的内容如果父组件使用了子组件2个插槽父组件在子组件使用具名插槽在vue3中setup的注意点setup生命周期在beforecreated之前setup可以拿到两个参数,props和context给子组件传2个属性打印contextcontext原创 2021-10-08 22:58:37 · 286 阅读 · 0 评论 -
vue3- reactive对比ref
原创 2021-09-23 22:51:17 · 112 阅读 · 0 评论 -
vue3响应式原理-reflect
proxy负责对某个数据进行增删改查的监听,不过vue3底层不是直接对target进行如下的简单操作。而是利用es6的window.reflect利用reflect取一个对象的属性利用reflect修改对象属性利用reflect删除对象的某个属性object上的一些属性,reflect也有比如给object定义相同属性名,会导致代码单线程卡住,阻塞下面代码运行如果是使用reflectdeflect会返回执行的结果好处是,通过返回值就会知道成功还是失败。对于vue3而言,原创 2021-09-23 22:47:10 · 4880 阅读 · 4 评论 -
vue3 响应式原理 - proxy
在vue2中一些无法响应式的情况在vue3中都不存在那些问题在vue2中用Object.definedProperty实现响应式,但是只有set和get的时候有响应式,如果删除了某个对象属性或者添加某个对象的属性就无法实现响应式显示vue3 响应式原理,使用了proxy以下代码案例使用p来代理person当p添加属性的时候,person也会增加属性,删除p属性,person也会被删除,不过没有发出通知(因为通知的时候可以去更新页面)如果想要发出通知,可以在get的时候执行,且可以retu原创 2021-09-19 23:33:12 · 550 阅读 · 0 评论 -
vue3 - reactive函数处理基本类型和对象类型数据
如果拿reactive包裹基本数据类型如果拿reactive包裹对象如果用ref包括对象,则要多一级.value,不过实际上ref底层也是去调用reactivereactive可以包裹很深的对象数据类型reactive也可以包裹数组类型,实现数组类型数据的响应式变化,此时修改数组的索引也能引起响应式变化,这在vue2的时候是不可实现的如果要用reactive包裹基本数据类型,可以多包括一层{}:总结:如果给引用数据类型使用ref也行,记得.value。如果给基本数据类型使.原创 2021-09-16 23:31:35 · 5063 阅读 · 0 评论 -
vue3 - ref函数处理对象类型数据
打印一下用ref包裹的对象打印出来发现,变成proxy对象,且不需要通过.value的形式获取响应式数据的值了。此时改成这么写:页面数据更新了分析:refimpl和proxy的区别:如果对象也是用refimpl包裹对象,则会出现这种情况:导致需要job.value.age.value才能获取到值,但实际不是,说明不是refimpl对象。说明也没用到get、set,因为refimpl就是对get、set的封装。实际上在vue3里面处理引用数据类型变成响应式用的是proxy代理..原创 2021-09-15 23:12:09 · 15304 阅读 · 1 评论 -
vue3 - ref函数处理基本类型
需求:点击按钮更新页面数据如果这么写,数据会更新,但是页面不会更新:如果想让页面显示与数据同步,也就是响应式更新,要用ref,ref包裹后是个对象,是refImpl的实例对象原创 2021-09-12 23:01:31 · 5853 阅读 · 0 评论 -
vue3 - 初识setup
在setup中写组件用到的属性和方法知识点:如果setup最后返回对象,则属性和方法在模板中都可以使用效果如果返回一个渲染函数也可以用精简的return写法此时页面只显示渲染函数里面的内容,不显示模板上的内容vue3使用vue2的组合式api依然可以使用在vue2中使用vue3中的属性和方法在vue3里读取vue2的属性和方法是不行的!如果vue2和vue3混用,且属性名和方法名重名,会以vue3为主vue2的a是100vue3的a是200.原创 2021-09-08 23:12:13 · 194 阅读 · 1 评论 -
vue3 开发者工具的安装
chrome插件的安装vue3使用devtool,还看不到vuex原创 2021-09-07 23:20:09 · 957 阅读 · 0 评论 -
vue3 分析工程文件
vue3的main.js的写法vue2的main.js写法区别vue3的app类似vue2的vm,但是app更轻打印发现,确实如此vue3的模板不用一个根标签原创 2021-09-06 23:24:10 · 107 阅读 · 0 评论 -
vue3 用vue-cli和vite启动项目
1.用vue-cli启动项目2.用vite启动项目原创 2021-09-06 23:07:47 · 6165 阅读 · 0 评论 -
vue3源码中常用基础工具函数
babelParserDefaultPlugins babel 解析默认插件/** * List of @babel/parser plugins that are used for template expression * transforms and SFC script transforms. By default we enable proposals slated * for ES2020. This will need to be updated as the spec moves f转载 2021-08-19 15:21:05 · 914 阅读 · 0 评论 -
vue项目在哪个层级目录下npm install?
package.json在哪里,就在哪里执行npm install原创 2021-04-09 11:22:58 · 637 阅读 · 0 评论 -
在vue中更好的使用客户端存储localStorage
代码示例:if (localStorage.getItem('cats')) { try { this.cats = JSON.parse(localStorage.getItem('cats')); } catch(e) { localStorage.removeItem('cats'); } }优点:1.为了存储对象和数组这样更复杂的数据,你必须使用 JSON 来对数据进行序列化和反序列化。2.我们转而调用 Local转载 2021-04-07 16:32:38 · 217 阅读 · 0 评论 -
vue-router的index.js文件配置参数
RouteConfig 的类型定义:interface RouteConfig = { path: string, component?: Component, name?: string, // 命名路由 components?: { [name: string]: Component }, // 命名视图组件 redirect?: string | Location | Function, props?: boolean | Object | Function, alias转载 2021-04-02 15:22:47 · 2193 阅读 · 0 评论 -
Eslint跳过对某行、某段代码的检查
1.跳过对下一行代码的检测// eslint-disable-next-linedebugger2.跳过对某段代码的检测/* eslint-disable */debugger/* eslint-enable */原创 2021-03-22 10:01:37 · 4413 阅读 · 0 评论 -
Vue命名规范
一、组件命名Vue给出的官方的命名规范:当注册组件 (或者 prop) 时,可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。命名可遵循以下规则:1、有意义的名词、简短、具有可读性2、以小写开头,采用短横线分割命名3、基础组件名以Base、App 或 V开头4、文件夹命名主要以功能模块代表命名二、Vue组件中的方原创 2021-03-21 22:33:06 · 2883 阅读 · 0 评论 -
vue 报错error in render: “TypeError: Cannot read property ‘0‘ of undefined“
比如使用了 this.data[0]如果data不存在,就会报这个错原创 2021-03-18 15:39:36 · 193 阅读 · 0 评论 -
vue项目文件命名风格指南
使用vue-cli工程化开发项目时,会需要创建许多的文件,如何统一命名需要遵循一定的规范Component所有的Component文件都是以大写开头 (PascalCase),这也是官方所推荐的。但除了 index.vue。例子:@/components/BackToTop/index.vue@/components/Charts/Line.vue@/views/example/components/Button.vueJS 文件所有的.js文件都遵循横线连接 (kebab-cas.转载 2021-02-02 14:08:44 · 312 阅读 · 0 评论 -
vue实现图形验证码
效果图:代码:验证码组件:src/common/sIdentify.vue<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script> export default { n原创 2021-01-05 16:48:45 · 1771 阅读 · 0 评论 -
vue3(或vue2)实现页面水印效果
<template> <div> <div>水印测试</div> </div></template><script>import { defineComponent } from 'vue';import Watermark from '@/common/wartermark' // 引入水印export default defineComponent({ name: 'WatermarkT原创 2021-01-05 14:03:10 · 1363 阅读 · 0 评论 -
vue(或vue3)实现父组件给子组件传递样式变量及在css3内使用变量
在使用vue开发时,经常会封装很多的组件方便复用,那么难免就有写样式相关组件,比如需要使用时传入颜色、高度等样式参数。那么问题来了:我们要怎么在样式中使用组件中接收的参数呢?父组件页面:<children colors="red"/><script>import { defineComponent } from 'vue';import children from './children/index.vue'export default defineComponen.原创 2021-01-04 11:46:29 · 5627 阅读 · 0 评论 -
在vue3项目中实现axios取消某个请求以及全局拦截器阻止重复请求
有时候会遇到一个需求,即需要取消前面的一个或多个请求,就要使用axios的一个方法CancelToken(), 又或者需要全局在项目中对在一定时间段的请求进行去重。比如某些接口返回较慢,用户可能会频繁点击,如果只是单个页面可通过“防抖”处理,如果是多个页面,则需要通过全局接口拦截器进行处理。以上情况有可能在有Loading遮罩时依然发生,所以我们要考虑前端阻止重复请求的方法。1.借助axios的CancelToken在Axios中取消请求最核心的方法是CanelToken。在官网文档中有写到两种方法.转载 2020-12-31 16:27:21 · 5976 阅读 · 3 评论 -
在vue3项目中全局使用axios(非vue-cli3.x)
1.安装npm install axios2.在main.js引入及全局使用import { createApp } from 'vue'import router from './router'import App from './App.vue'import axios from 'axios';const app = createApp(App) // 创建实例app.config.globalProperties.$axios=axiosapp.use(router).mou原创 2020-12-31 11:36:56 · 2275 阅读 · 5 评论 -
使用vue-cli创建构建vue3项目(npm方式)
1.运行命令 vue create myproject(项目名)2.鼠标选择 “Default (Vue 3 Preview) ([Vue 3] babel, eslint)”(如图vue3项目默认安装包括babel,eslint,如果想要自定义插件配置,则选择 “Manually select features”)提示:Vue 3.x 的项目,需要使用 Vue cli v4.5 以上的版本版本不够的请使用命令升级:npm install -g @vue/cli安装完成后可以在命令行输入原创 2020-12-28 10:15:27 · 2462 阅读 · 0 评论