vue2/vue3全家桶
vue2/vue3技术栈开发总结
追逐梦想之路_随笔
这个作者很懒,什么都没留下…
展开
-
vue2的vue-router路由嵌套实现(源码分析和实现)
路由实例router/index.jsimport Vue from 'vue'import Router from '../demoTools/kVue-router/router'// import Router from 'vue-router'Vue.use(Router)/* 初始路由-静态路由 */const routes = [ { path: '/', component: () => import('@/views/index.原创 2022-03-01 23:52:32 · 404 阅读 · 0 评论 -
基于vue2.0自定义实现Router(简单版)
解析:Router是一个插件 内部做了什么?1.router-view 和 router-link组件的实现2.install:this.$router.push() 跳转实现router-view思路:利用vue的响应式基于vue2.0自定义实现Router(简单版)在demoTools/components文件中定义两个组件1.about.vue中<template> <!--about组件--> <div>欢迎来到about页面<原创 2022-02-23 22:51:49 · 1052 阅读 · 0 评论 -
vue2实现数组push/pop/shift/unshift方法重写
// 获取数组原型const orginalPrototype = Array.prototype// 备份用来重新操作const arrPrototype = Object.create(orginalPrototype)const newArr = ['push', 'pop', 'shift', 'unshift']newArr.forEach(methods => { // 自定义数组 arrPrototype[methods] = function() {原创 2022-03-06 15:49:35 · 2121 阅读 · 0 评论 -
vuex的state/getters/commit源码实现
store/index.jsimport Vue from 'vue'import Vuex from '../demoTools/kvuex'Vue.use(Vuex)export default new Vuex.Store({ state: { count: 0 }, mutations: { addState(state) { state.count++ } }, actions原创 2022-03-02 00:11:56 · 247 阅读 · 0 评论 -
vue-router 重复跳转路径报错源码分析和解决方案
开发总结原创 2022-07-21 11:42:26 · 1065 阅读 · 0 评论 -
vue.js实现购物车的简单计件
//html部分<div id="app"> <div class="goods"> <div>小兔子</div> <p>单价:{{price}}</p> <butto...原创 2019-03-19 21:23:55 · 214 阅读 · 0 评论 -
Vue中获取滚动条的高度的方法
mounted() {//可以在这里面直接进行滚动条的获取window.addEventListener('scroll', this.handleScroll, true)}methods: {handleScroll() {//方法一//var top = Math.floor(document.body.scrollTop || document.documentElement...原创 2019-05-29 22:38:34 · 29029 阅读 · 11 评论 -
vue2.0解析源码自定义实现vuejs(简单版)
vuejs基础版在页面中数据绑定使用xxx.html中示例`<div id="app"> <p> {{count}} </p> <div v-text="text"></div> <div v-html="content"></div></div><script src="./vue.js"></script><script&原创 2022-03-05 23:57:36 · 279 阅读 · 0 评论 -
vue2对数组覆盖7个方法源码解析
以下是源码 并添加解析,源码路径src\core\observer\array.js/* * not type checking this file because flow doesn't play well with * dynamically accessing methods on Array prototype */import { def } from "../util/index";// 获取原型const arrayProto = Array.prototype;// 克隆原创 2022-03-09 07:55:07 · 616 阅读 · 0 评论 -
vue实现tabs点击自动滚动居中
template<ul ref='tabsRef'> <li class="all-style">全部</li> <li class="other-tab" @click="tabsOnclick($event)" v-for="item in datas">{{item}}</li></ul>data部分data{ return{ datas:[ '文学', '外国名著', '中国名著', '四大原创 2022-04-06 10:55:43 · 5885 阅读 · 0 评论 -
html2canvas组件截图以及vue-qr动态生成二维码
开发总结原创 2022-12-21 23:53:26 · 394 阅读 · 0 评论 -
vue2源码分析props、methods、data、computed、watch优先级
话不多说,先上一段源码,源码路径:src\core\instance\init.js文件下export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm, opts.methods) if (opts.data) { in原创 2022-03-06 23:27:10 · 1418 阅读 · 0 评论 -
vue2的nextTick源码实现分析
vue文件调用1.egmounted(){ this.title = '开心图书' this.$nextTick(()=>{ document.title = this.title })}源码部分调用$nextTick函数执行Vue.prototype.$nextTick = function (fn) { return nextTick(fn, this) };定义nextTick函数需要用到的变量// 把$nextTick传入的函数push到callbac原创 2022-03-24 00:20:44 · 1084 阅读 · 0 评论 -
vue组件命名规范-分享
一个组件在封装和使用的时候的命名规范–回顾1.vue2.0版本文档介绍的以下2种组件命名方式:第一种:使用 kebab-case(推荐使用这种,遵循 W3C 规范中的自定义组件名:字母全小写且必须包含一个连字符)Vue.component('my-component-name', { /* ... */ })第一个参数 my-component-name就是当前组件的名字,是我们自己定义...原创 2020-04-04 11:27:55 · 2842 阅读 · 0 评论 -
vue2.0源码 Object.defineProperty实现数据响应
vue设计的初衷:1.将视图view的状态和行为抽象化,使得UI和业务逻辑分开2.mvvm:model=>view=>viewmodel数据响应式原理数据变更能够在视图中,就是数据响应式。vue2中利用Object.defineProperty()实现实时变化检测1、数据响应式:监听数据变化并在视图中更新// 实现defineReactive数据响应式function defineReactive(obj, key, val) { // 如果当前的值是obj那么继续递归原创 2022-03-05 23:42:55 · 768 阅读 · 0 评论 -
vue使用axios封装接口的请求(完整详细的项目封装和接口使用过程,附有axios的ts源码)
//使用 "axios"封装一下请求的接口 vue项目为例第一部分:request.js内容://引入axiosimport axios from "axios";const service = axios.create({ baseURL: process.env.MY_PROJECT_URL, // api 的 base_url 也就是代表各个环境 比如dev test 等 timeout: 10000 //请求的时间});// 请求时的拦截器service.int原创 2021-03-27 12:47:57 · 515 阅读 · 1 评论 -
Vue.js如何封装组件?
需求:现在需要在多个页面使用到上拉和下拉的滚动效果,手动封装一个BScroll的,如果没有安装better-scroll插件的安装上就可以1、首先:在src文件目录下创建一个common文件夹,里面在建一个封装组件的文件夹,比如:BScroll文件夹,在该文件夹里面建一个index.vue 文件,里面是需要封装的具体内容:<template> <div class=...原创 2019-05-02 18:08:55 · 2807 阅读 · 0 评论 -
vue.js双向数据绑定的原理
vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。在MDN上对该方法的说明是:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。它接收三个参数,要操作的对象,要定义或修改的对象属性名,属性描述符。...原创 2019-04-19 08:41:52 · 608 阅读 · 0 评论 -
webpack5构建基于Vue3+ElementPlus项目搭建(开发和生产)
webpack5+vue3+elementPlus构建开发和生产环境原创 2022-10-01 22:38:28 · 846 阅读 · 0 评论 -
vue3 toRef和toRefs的使用
toRef和toRefs作用:创建一个ref对象,其value指向另一个对象中得某一个属性语法:const name = toRef(data,‘name’)应用:要将响应式对象中得某个属性单独提供给外部使用时拓展:toRefs与toRef功能一致 但可以批量创建多个ref对象 语法:toref(data)为了能在template写的简短,引用toRef处理被toRef包裹的响应式,修改时候直接读取原来响应式reactive代理属性 实时响应变化不使用toRef则响应式的修改就会出现Bug/原创 2021-10-16 17:46:06 · 1224 阅读 · 0 评论 -
vue3的watch监听方式
template部分<template> <h1>方式一:监听一个属性</h1> <p>求和:{{ sum }}</p> <button @click="sum++">方式一点我加1</button><br /> ------------------------------------------------------------------------------------<br原创 2021-10-10 13:57:44 · 2670 阅读 · 0 评论 -
vue3的数据响应式源码实现分析
reactive函数式响应式一个入口,主要是判断只读属性和绑定数据响应式,createReactiveObject方法是真正做数据代理和响应式export function reactive(target: object) { // if trying to observe a readonly proxy, return the readonly version. if (isReadonly(target)) { return target } return createRea原创 2022-04-06 23:47:22 · 400 阅读 · 0 评论 -
vue3的生命周期
1.vue3将不在使用beforeDestroy和destroyed 2个钩子beforeDestroy 替换成 beforeUnmountdestroyed 替换成 unmounted2.vue2 => vue3 的生命周期钩子对应关系(图为准)常用的可复制beforeCreate|created => setupbeforeMount => onBeforeMountmounted => onMountedbeforeUpdate => onBefore原创 2021-10-10 15:46:50 · 1116 阅读 · 0 评论 -
vue3 基本介绍
vue3的官方:https://github.com/vuejs/vue-next/releases/tag/v3.0.01.vue3比vue2提升了哪些?1.初次打包减少41%2.初次渲染快了55%,更新渲染快了133%3.内存减少54%2.源码的升级使用proxy代替了defineProperty实现响应式重写虚拟dom的实现和Tree-Shaking3.拥抱typeScriptvue3可以更好的支持Typescript4.新的特性1.ComPosition Api(组合式API)原创 2021-09-28 00:06:08 · 449 阅读 · 0 评论 -
vue3的父子组件通讯方式
父组件中<template> <HelloWorld msg="父传子" hh="清华大学" @childTestClick="childTestClick"> </template>import HelloWorld from "./components/HelloWorld.vue";export default { name: "father", components: { He原创 2021-10-09 00:15:35 · 77 阅读 · 0 评论 -
vue3二种构建方式
1.方式一采用之前vue2的方式vue create vue3 demo_vue32.方式二使用vite创建vite介绍vite的官网 vitejs.cnvite是构建工具目前比较火的构建工具有:webpack gulp gruntvite的优势:1.开发环境中,无需打包操作,可快速的冷启动2.轻量快速的热重载(HMR)3.真正的按需加载,不在等待整个应用编译完成使用vite创建项目的步骤npm init vite-app demo_vue3cd demo_vue3npm i原创 2021-09-28 00:09:35 · 150 阅读 · 0 评论 -
vue3全家桶技术栈基础(一)
vue3全家桶总结原创 2023-02-20 18:13:17 · 2668 阅读 · 1 评论 -
vue3全家桶之vuex和pinia持久化存储基础(二)
基于vuex和pinia的持久化存储方案原创 2023-02-23 17:41:53 · 1634 阅读 · 0 评论 -
vue3的ref的使用
1、响应式的数据ref函数:基本数据类型使用ref情况下age,name直接输出都是一个RefImpl实现类,其中基本类型的值直接放在这个实现类RefImpl的value里面,取值需要age.value,age.value注意:直接通过setup函数return出来的变量在末班解析的时候不需要.value的形式取值,因为模板能自动解析出value值2、响应式的数据ref函数:引用数据类型obj.value打印的值: Proxy {name: '刘德华', age: 19, job: '高原创 2021-10-05 10:39:26 · 4389 阅读 · 1 评论 -
vue3的computed的用法
以下提供一个简单的demo,仅供参考demo示例template部分<template> <div>简单只读:{{ obj.computedAllNum1 }}</div> <input v-model="obj.num1" /> <br /> <input v-model="obj.num2" /> <div>可读可写</div> <input v-model=原创 2021-10-09 01:16:16 · 1094 阅读 · 0 评论 -
vue3响应式模拟实现(reactive/effect/track/trigger)
// 是否objectconst isObject = obj => typeof obj === 'object' && obj !== null// 使用es6的Proxy模拟vue3响应式function reactive(obj){ if(!isObject(obj)) return obj return new Proxy(obj,{ get(target,key,receiver){ const res = Reflect.get(t.原创 2022-04-07 17:23:35 · 1497 阅读 · 0 评论 -
vue3(兼容vue2)属性选项优先级
从源代码判断顺序可以知道选项优先级排序:props > inject > methods > data > computed > watch > created// options initialization order (to be consistent with Vue 2): // - props (already done outside of this function) // - inject // - methods // - data原创 2022-04-06 22:25:28 · 1576 阅读 · 0 评论 -
vue3的ref和reactive对比(总结)
1、从定义角度对比ref用来定义:基本数据类型reactive来定义:对象(数组)类型数据备注:ref也可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象2、从原理的角度对比ref通过Object.defineProperty()的get和set来实现响应式(数据劫持)reactive通过使用proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部数据3、从使用角度来对比ref定义的数据:操作数据需要.value读取,模板中则不需要使用.value原创 2021-10-05 23:57:19 · 784 阅读 · 1 评论 -
vue3的响应式原理(对比vue2响应式原理)
在学习vue3响应式原理前,先对比一下vue2的响应式原理1、回顾vue2的响应式原理实现原理:1.对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)2.数组类型:通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行二次包裹)Object.defineProperty(data,'count',{ get(){}, set(){} }})vue2的响应式存在问题:1.新增属性、删除属性,界面不会自动更新2.直接原创 2021-10-06 00:09:22 · 252 阅读 · 0 评论 -
vue3的reactive函数实现响应式
reactive使用1.作用:定义一个对象类型的响应式数据(基本数据类型不能使用它,使用ref)2.语法:const data = reactive(源对象) 接收一个对象(或者数组),返回一个代理对象(proxy对象)3.reactive定义的响应式数据是深层次的4.内部基于es6的proxy实现,通过代理对象操作源对象内部数据进行操作试下响应式示例:<template> <h1>{{data.type}}</h1> <p>{{nam原创 2021-10-05 11:49:00 · 3108 阅读 · 0 评论 -
vue3的mainjs入口文件写法以及template模板的细微差异
以下仅是对main.js入口文件简单对比分析vue2入口文件mian.js中引入写法/* import Vue from 'vue';import App from './App.vue';const vm = new Vue({ render: (h) => h(App),});console.log(vm);vm.$mount('#app'); */vue3入口文件mian.js中引入写法import { createApp } from 'vue';import原创 2021-09-28 23:47:15 · 1015 阅读 · 0 评论 -
vue3父组件传值给子组件,子组件无法实时更新父组件传递值
圆环进度条为例:操作父组件修改每个子组件的数据,没能实时更新子组件1.未解决前的写法父组件中<template> <div class="process-parent"> <div class="process-style" v-for="(item, index) in data" :key="index"> <Process :curent-process="item" /> <div class="pr原创 2021-11-21 18:16:59 · 10285 阅读 · 3 评论 -
vue3的hooks与vue2的mixins用法对比
vue2的mixins写法这是一个混入jsdemoMixins.jsexport default { data() { return { dataList: { initData: { price: 122, title: '当当图书系统', type: '考研辅导', url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%原创 2021-10-13 00:44:08 · 1470 阅读 · 0 评论 -
vue3的setup的认识
setup是什么?认识setup1.理解:vue3.0出现中的一个配置 值为一个函数2.是所有CompositionAPI(组合API)表演舞台3.组建中所用到的:数据、方法、均要在setup中配置4.set的函数2种返回值:1.若返回一个对象,则对想中的属性、方法、在模板中均可以直接使用2.若返回一个渲染函数:则可以自定义渲染内容5.注意事项:1.尽量不与2.X配置混用 vue2中的data methods computed 可以访问setup中的属性、方法 但在setup中不能访原创 2021-09-30 00:23:04 · 520 阅读 · 0 评论 -
vue3路由的跳转和接参(1)
跳转方法在import { useRouter } from "vue-router"; setup(){ router.push({ path: "/websocket", query: { username: state.username }, });}接收参数import { useRoute } from "vue-router"; setup(){ router.push({ const username = Route.query.use原创 2021-11-28 02:34:08 · 190 阅读 · 0 评论