![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 83
vue
dralexsanderl
这个作者很懒,什么都没留下…
展开
-
vue中有趣的几个功能
vue中有趣的几个功能原创 2023-08-13 13:52:24 · 845 阅读 · 0 评论 -
为什么 Mixin 被认为是有害的
为什么 Mixin 被认为是有害的原创 2023-08-12 00:13:14 · 4826 阅读 · 0 评论 -
校验vue prop的几种方式
校验vue prop的几种方式原创 2023-08-11 23:07:05 · 2400 阅读 · 0 评论 -
vue 相关知识总结
vue 相关知识总结原创 2023-06-24 23:32:11 · 765 阅读 · 0 评论 -
vue2 class与style动态绑定语法
class与style都是标签内的属性,可以使用v-bind指令解析表达式来实现动态添加。vue对class与style做了专门的增强,classstyle的表达式结果类型可以是字符串、对象或者数组。原创 2023-06-12 21:40:30 · 2355 阅读 · 0 评论 -
vue2模板渲染更新详细流程
vue2模板渲染更新详细流程原创 2023-06-07 22:40:16 · 1330 阅读 · 0 评论 -
vue3使用指南
vue3使用指南原创 2023-05-11 23:03:20 · 2285 阅读 · 1 评论 -
一篇文章让你彻底了解vuex的使用及原理(下)
vuex的使用及原理原创 2023-04-24 22:40:39 · 650 阅读 · 0 评论 -
VueRouter路由模式解析
VueRouter路由模式解析原创 2023-04-12 00:14:37 · 1954 阅读 · 0 评论 -
vue2.x组件编写总结
vue2.x组件编写总结原创 2023-04-02 13:38:22 · 441 阅读 · 0 评论 -
vue2.x指令总结与自定义指令
vue2.x指令总结原创 2023-04-01 15:59:54 · 521 阅读 · 0 评论 -
vue3 setup函数
vue3 setup原创 2022-11-13 16:37:46 · 870 阅读 · 0 评论 -
vue 项目搭建的几种方式
vue 项目搭建的几种方式原创 2022-11-12 17:15:47 · 682 阅读 · 0 评论 -
vue3响应式
vue3响应式相关api原创 2022-11-12 14:44:58 · 5637 阅读 · 0 评论 -
vue3解构响应式失效解析
vue3解构响应式失效解析原创 2022-08-16 21:31:42 · 4077 阅读 · 0 评论 -
Vue服务端渲染 - 数据相关
Vue服务端渲染数据预取相关原创 2022-07-24 23:46:31 · 385 阅读 · 0 评论 -
Vue服务端渲染-路由相关
ssr路由原创 2022-07-24 23:43:42 · 328 阅读 · 0 评论 -
vue服务端渲染
vue 服务端渲染原创 2022-07-21 21:37:50 · 1329 阅读 · 0 评论 -
vue知识汇总
vue知识汇总原创 2022-02-20 14:10:21 · 2522 阅读 · 0 评论 -
vue响应式系统原理解析
编写一个mini观察器来解析Vue2.0的响应式系统。可能大部分人都已知道了Vue2.0是采用Object.defineProperty()这个API进行实现,现在我们从0开始通过Object.defineProperty()编写一个mini观察器理解Vue响应式的原理思路。1、getter 和 setter实现一个转换函数(或者说是拦截函数),对对象中的属性进行set和get。使用log查看是否有执行function convert(obj) { Object.keys(obj).forEa原创 2021-01-02 23:20:26 · 2140 阅读 · 1 评论 -
vue-cli3 报错 Cannot read property ‘upgrade‘ of undefined
在启动项目后报错TypeError: Cannot read property 'upgrade' of undefined at Server.<anonymous> (/data/git/smart_city/local/page/node_modules/_webpack-dev-server@3.11.0@webpack-dev-server/lib/Server.js:135:47) at Array.forEach (<anonymous>) a原创 2020-10-27 12:08:11 · 629 阅读 · 0 评论 -
Vuex辅助函数源码分析
辅助函数如果在一个组件中需要获取多个状态,通过this.$store.state来声明就会显得有些重复跟冗余,vuex提供了mapState,mapMutations,mapGetters,mapActions等api。工具函数// 统一格式function normalizeMap (map) { if (!isValidMap(map)) { return [] } return Array.isArray(map) ? map.map(key => ({ ke原创 2020-09-06 16:29:18 · 1005 阅读 · 0 评论 -
Vuex源码解析
Vuex原创 2020-09-05 13:41:48 · 245 阅读 · 0 评论 -
Vuex中的辅助函数
mapState如果在一个组件中需要获取多个状态,通过this.$store.state来声明就会显得有些重复跟冗余,通过mapState这个辅助函数可以帮助生成计算属性。在store文件中定义state// store.jsstate:{ number1:1, number2:2}在组件中使用mapState,放置在computed里面。// App.vue<template> <div> <h1>{{number1}}</h1原创 2020-08-29 16:22:36 · 6141 阅读 · 0 评论 -
vue use源码解析
插件的使用Vue可以通过插件扩展其全局功能。插件的使用也很简单,使用Vue.use(plugin)进行注册后就可以全局使用。下面通过源码来看看是如何实现的Vue.use源码解析Vue.use的定义是在 src/core/global-api/use.js 这个文件里边。export function initUse (Vue: GlobalAPI) { // 定义插件 Vue.use = function (plugin: Function | Object) { // 接受一个插件作为参数原创 2020-08-20 23:42:38 · 320 阅读 · 0 评论 -
Vuex状态管理
VuexVuex 是一个专为 Vue.js 应用开发的状态管理模式,集中式存储管理应用所有组件的状态。Vuex遵循“单向数据流”理念,易于问题追踪以及提高代码可维护性。在项目中添加引入vuexvue add vuexstate(状态)用于保存数据状态mutations(状态变更)用于修改状态创建一个store.js文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.原创 2020-08-20 22:21:00 · 95 阅读 · 0 评论 -
服务端渲染SSR
SSRVue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行。CSR与SSR比较传统的web开发使用express举个例子npm install expres原创 2020-10-24 11:02:38 · 144 阅读 · 0 评论 -
vue组件化
组件化组件化是vue的核心思想,它能提高开发效率,方便重复使用,简化调试步骤,提升整个项目的可维护 性,便于多人协同开发。组件间通信父组件=>子组件props// 父组件<Com1 msg="message"></Com1>// 子组件通过props获取props:{msg:String}$attrs子组件中未声明的父组件中传过来的值,可以通过$attrs获取。 // 父组件<Com1 msg="message" msg2="messa原创 2020-07-19 16:56:29 · 253 阅读 · 0 评论 -
vue源码学习之双向绑定原理
双向绑定原理v-model简单来讲是一个语法糖,可以使得代码变得更加简洁。例如:<input v-model="name" /><!--相当于--><input :value = "$attrs.value" @input=“$emit('input',$event.target.value)” />v-model相当于在input上指定了一个:value和@input,也就是值的传递和事件的监听。从生成的render函数来看(function anon原创 2020-06-03 15:23:54 · 299 阅读 · 0 评论 -
vue源码学习之模板编译
模板编译模板编译的主要目的是将模板(template)转换为渲染函数(render)vue中使用模板编译的必要性Vue 2.0需要用到VNode描述视图以及各种交互,手写显然不切实际,因此用户只需编写类似HTML代码的Vue模板,通过编译器将模板转换为可返回VNode的render函数。模板编译带编译器的版本中,可以使用template或el的方式声明模板。<div id="app"> <h1>Vue模板编译</h1> <p>{{name}原创 2020-06-02 18:36:55 · 262 阅读 · 0 评论 -
在vue中启动eslint
在vue项目中的package.json文件中的"lint"里面的后缀中加入--fix然后终端里输入:npm run lint原创 2020-03-21 23:12:57 · 1494 阅读 · 0 评论 -
vue源码学习之组件化
组件化例子Vue.component('Com1', { template: '<div>component</div>' })组件声明Vue.component()或者是components选项src/core/global-api/assets.jsinitAssetRegisters()export function initAssetRegisters (Vue: GlobalAPI) { // 声明组件(可以是指令,组件,过滤器) ASSET_TYPES原创 2020-06-02 16:36:13 · 193 阅读 · 0 评论 -
vue源码学习之虚拟DOM
虚拟DOMVirtual DOM,是js对象,能够描述DOM结构和关系。应用的各种状态变化会作用于虚拟DOM,最终映射到真实DOM上。具有的优点虚拟DOM轻量、快速:当发生变化时通过新旧虚拟DOM的比对就可以得到最小的DOM操作量,从而提升性能和用户体验。跨平台:将虚拟DOM更新转换为不同运行时特殊操作实现跨平台。兼容性:还可以加入兼容性代码增强操作的兼容性。在Vue中的必要性vue 1.0中有细粒度的数据变化侦测,它是不需要虚拟DOM的,但是细粒度造成了大量开销,这对于大型项目来说是不原创 2020-06-01 18:14:00 · 350 阅读 · 0 评论 -
vue源码学习之异步更新队列
异步更新队列update()src/core/observer/watchers.js在执行dep.notify()之后,watcher就会执行update()方法。 update () { // 通知更新 /* istanbul ignore else */ if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWa原创 2020-05-31 20:59:00 · 288 阅读 · 0 评论 -
vue源码学习之数据响应式
数据响应式数据的变化会作用于UI而不需要通过DOM操作。在原理上,主要是采用Object.defineProperty(),通过对对象的setter属性进行拦截,从而将数值的变化转换围UI的变化。在初始化过程中,会调用initState()方法,会初始化data,props等。数据初始化src/core/instance/state.jsexport function initState (vm: Component) { vm._watchers = [] const opts = vm原创 2020-05-31 14:12:26 · 217 阅读 · 0 评论 -
vue源码学习之初始化过程
初始化过程初始化过程:init -> $mount -> compile -> new Watcher -> render -> updatesrc/platforms/web/runtime/index.js:实现$mountsrc/core/index:全局apisrc/core/instance/index:声明vue构造函数src/platforms/web/entry-runtime-with-compiler:覆盖了$mountsrc/core/in原创 2020-05-30 17:50:35 · 280 阅读 · 0 评论