vue3
前端一枚
点关注 不迷路
展开
-
Vue中如何扩展⼀个组件
按照逻辑扩展和内容扩展来列举:逻辑扩展有:mixins、extends、composition api;内容扩展有: slots;组件和组件之间有时候会存在相同的代码逻辑,我们希望对相同的代码逻辑进行抽取,vue3中支持使用composition api1.如果是data函数的返回值对象2.如何生命周期钩子函数3.值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象4.全局混入5.局部混入二、extends从实现角度来看,extends 几乎原创 2022-12-03 20:07:53 · 1320 阅读 · 0 评论 -
vue父子组件之间双向数据绑定的(vue2/vue3)
vue考虑到组件的可维护性,是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信(第一种方式),通过这种间接的方式改变父组件的data,从而实现子组件改变props的值。第二种(.sync 2.3.0+ 新增)第三种 (vue3)vue3取消了.sync这种语法,使用v-model 语法代替。默认情况下,v-model 在组件上都是使用 modelValue 作为 prop,并以 update:modelValue 作为对原创 2022-12-03 15:27:25 · 7303 阅读 · 0 评论 -
vue3项目实现防抖/截流
【代码】vue3项目实现防抖/截流。原创 2022-04-25 14:34:47 · 3718 阅读 · 1 评论 -
解决vue3+ts+eslint下Parsing error: ‘>‘ expected.eslint
问题:解决方法:把.eslintrc.json里的parserOptions配置改成"parser": "vue-eslint-parser","parserOptions":{"parser":"@typescript-eslint/parser"},原创 2022-02-28 11:43:34 · 12989 阅读 · 2 评论 -
vue3路由配置404页面
vue2中可以使用*,在vue3中使用*会报错需要换成这样,这种事vue-router4写法{path: "/:catchAll(.*)",redirect: { name: "Page404" }}原创 2022-02-24 17:25:26 · 1365 阅读 · 0 评论 -
vue3 + ts(typescript) ref 获取单个/多个dom元素
template<input type="text" ref="inputRef" /><!-- 加冒号传入divs方法 --><div v-for="i of 3" :key="i" :ref="divs"></div>setup// 获取单个domconst inputRef = ref<HTMLElement | null>(null);// 获取多个domconst arr = ref([]);const d转载 2022-02-17 11:05:14 · 2567 阅读 · 0 评论 -
学习vue3系列watch
watch 函数用来侦听特定的数据源,并在回调函数中执行副作用。默认情况是懒执行的,也就是说仅在侦听的源变更时才执行回调。现在是监听整个对象:第一个参数传入的 state 对象,第二个参数是回调函数,只要 state 中任意的属性发生改变都会执行回调函数。<template> <button @click="change">count is: {{ state.count }}</button></template><script原创 2022-02-16 14:57:24 · 1068 阅读 · 0 评论 -
Vue CLI3 开启gzip压缩
首先这个是需要后台帮忙配置的,后台不配合就不用看了。。。。nginx 服务端开启Gzipserver{ listen 80 default_server; server_name 106.13.190.39; index index.php index.html index.htm default.php default.htm default.html; root /www/wwwroot/106.13.190.39;#上面是我服务器自己一些配置转载 2022-02-10 09:48:11 · 691 阅读 · 1 评论 -
vue3中emit使用方法(新)
vue3中子组件向父组件传值分以下几步1、定义emits,emits的定义是与component、setup等这些属性是同级。例如emits此时是作为数组,它也可以接收一个对象2、方法中使用与之前的用法不同的是,现在需使用ctx.emit,其中ctx是setup中第二个参数,也就是上下文对象3、在父组件上定义同名方法接收4、父组件接收方法的参数为子组件传递的参数...转载 2022-01-20 14:40:08 · 9659 阅读 · 0 评论 -
vue3中.env.dev文件结合axios.defaults.baseURL的使用
结构是这样的:在项目里面新建.env.dev文件内容如下:NODE_ENV=developmentVUE_APP_SERVER=http://127.0.0.1:8880VUE_APP_WS_SERVER=ws://127.0.0.1:8880修改package.json注意:执行npm run serve-dev时 , --mode指定环境模式 dev(默认值:development),即执行.env.dev文件.最后在main.js中修改axios的ba...原创 2021-10-25 17:44:18 · 2894 阅读 · 0 评论 -
vue中 .env .env.development .env.production 详细说明
1.配置文件有:.env 全局默认配置文件,不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件2.命名规则:属性名必须以VUE_APP_开头,比如VUE_APP_XXX3.关于文件的加载:根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载比如执行npm run serve命令,会自动加载.env.development文件注意:.env文件无论是开发还是生成..原创 2021-10-19 18:38:08 · 5773 阅读 · 0 评论 -
shallowReactive和shallowRef
shallowReactiveshallowReactive监听了第一层属性的值,一旦发生改变,则更新视图;其他层,虽然值发生了改变,但是视图不会进行更新<template> <div class="about"> <h1>{{ state}}</h1> <span @click="change1">按钮1</span> <span @click="change2">按钮2</sp原创 2021-10-19 16:25:16 · 117 阅读 · 1 评论 -
vue3中toRaw使用
toRaw使用场景ref/reactive数据类型每次修改都会被追踪,都会更新UI界面,但是这样是非常消耗性能的,所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候我们就可以通过toRaw方法拿到它的原始数据,对原始数据进行修改,这样就不会被追踪,这样就不会更新UI界面,这样性能就好了。reactive: setup() { let obj={name:'lj',age:18} let state=reactive(obj) let obj2=toRa原创 2021-10-19 14:38:58 · 24853 阅读 · 1 评论 -
vue-cli3以上怎么关闭eslint?
找到文件vue.config.js(如果没有这个文件就在根目录上创建一个)将lintOnSave属性设置为false,如果没有就自己写个进去。module.exports = { lintOnSave: false}老版本如何关闭ESlint?找到文件bulid/webpack.base.config.js并注释掉对应代码。可能会有以下几种情况,你按照图片示例注释任意一处,重启项目即可。...原创 2021-10-18 16:30:19 · 334 阅读 · 0 评论 -
Vue优化:Uncaught TypeError: Illegal constructor
Vue项目进行一个优化,主要是将公共库分离出去不进行编译,遇到报错Uncaught TypeError: Illegal constructor报错bug:解决办法:mix.webpackConfig({ externals: { 'element-ui': 'Element', 'axios': 'axios', 'vue': 'Vue', 'vue-router': 'VueRouter' }});将原创 2021-07-07 16:20:44 · 3476 阅读 · 0 评论 -
2021-06-24vue2和vue3比较
一.vue3新特性: 1.数据响应重新实现(ES6的proxy代替Es5的Object.defineProperty) 2.源码使用ts重写,更好的类型推导 3.虚拟DOM新算法(更快,更小) 4.提供了composition api,为更好的逻辑复用与代码组织 5.自定义渲染器(app、小程序、游戏开发) 6.Fragment,模板可以有多个根元素二.vue2 vue3响应原理对比 1.vue2使用Object.defineProperty方法实现响应式数据原创 2021-06-24 09:48:22 · 308 阅读 · 0 评论