![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
若~~~
爱自己才是终身浪漫的开始。❤️
展开
-
vue的实现流程
三要素: 双向绑定、模板解析、渲染第一步:解析模板成render函数with的引用模板中所有的信息都要被render函数包含模板中用到的data属性都变成js变量v-modle、v-for……变成js返回vnode第二步: 响应式开始监听通过object.defineProperty监听到data中属性的get和set方法将data中的属性代理带vm上第三步: 首次渲染,显示页...转载 2019-12-20 17:30:58 · 300 阅读 · 0 评论 -
Vue深入响应式原理
Vue深入响应式原理Vue最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的javascript对象。而当你修改他们时,试图会进行更新。这使得状态管理非常直接,不过理解其工作原理同样重要,这样就可以避开一些常见的问题。Vue是如何追踪数据变化的?当你把一个普通的javascript对象传入Vue实例作为data选项,Vue将遍历此对象所有的属性,并使用Object.define...转载 2019-12-09 16:57:20 · 191 阅读 · 0 评论 -
Vue、React同一个dom元素绑定多个点击事件
Vue:<button type="button" @click="vueA();vueB()">vue</button> React:<button type="button" onClick={(event) => { ReactA(); ReactB();}}>react按钮</button>js(vue)methods:{ ...原创 2019-11-15 18:40:50 · 1090 阅读 · 0 评论 -
Vue路由
Vue路由1、路由(外置的) vue-routerimport VueRouter from 'vue-router';import Index from './components/index.vue';import List from './components/index.vue';import Login from './components/index.vue';Vue.u...原创 2019-06-12 08:32:26 · 324 阅读 · 0 评论 -
Vue钩子
Vue钩子1、钩子函数指令定义函数提供了几个钩子函数(可选):bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略...原创 2019-06-12 08:34:07 · 1228 阅读 · 0 评论 -
Diff算法
Diff算法什么是Diff算法?diff算法作为Virtual DOM的加速器,其算法的改进优化是React整个界面渲染的基础和性能的保障,同时也是React源码中最神秘的,最不可思议的部分传统Diff:计算一棵树形结构转换为另一棵树形结构需要最少步骤,如果使用传统的diff算法通过循环递归遍历节点进行对比,其复杂度要达到O(n^3),其中n是节点总数,效率十分低下,假设我们要展示1000...转载 2019-06-12 08:38:53 · 23889 阅读 · 5 评论 -
MVVM是什么?以及MVVM优点
MVVM1、MVVM是什么?MVVM是Model-View-ViewModel的简写它本质上是MVC 的改进版MVVM(Model-View-ViewModel)框架的由来是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架2、MVVM优点MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)...原创 2019-06-12 08:40:53 · 15865 阅读 · 7 评论 -
虚拟DOM和真实DOM的关系
虚拟DOM和真实DOM的关系首先,Virtual DOM并没有完全实现DOM,即虚拟DOM和真正地DOM是不一样的,Virtual DOM最主要的还是保留了Element之间的层次关系和一些基本属性。因为真实DOM实在是太复杂,一个空的Element都复杂得能让你崩溃,并且几乎所有内容我根本不关心好吗。所以Virtual DOM里每一个Element实际上只有几个属性,即最重要的,最为有用的,并...原创 2019-06-13 09:33:51 · 4014 阅读 · 0 评论 -
前后端涉及到的常用知识点
前后端是如何交互的iOS,H5,安卓等前端开发的如何跟后台进行交互?应该怎么去规避一些不该属于自己的任务而被后台强加于自己?1.前端请求数据URL由谁来写?在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查询参数也就是URL请求的参数。2.接口文档主要由谁来写?接口文档...原创 2019-06-13 22:44:15 · 934 阅读 · 0 评论 -
路由的实现原理---完整的demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-06-13 09:31:59 · 744 阅读 · 0 评论 -
Vue 知识大全------指令,vuex,组件状态,组件通信,生命周期,路由(vue-router),优化点以及ES6和webpack总结
原创 2019-08-22 09:55:05 · 146 阅读 · 0 评论 -
单页面与多页面应用开发对比以及单页面路由实现原理
MPA与SPA简介MPAMPA (Multi-page Application) 多页面应用指的就是最传统的 HTML 网页设计,早期的网站都是这样的设计,所之称为「网页设计」。使用 MPA 在使用者浏览 Web 时会依据点击需求切换页面,浏览器会不停的重载页面 (Reload),整个操作也常感觉卡卡。如果使用这样的设计在 Web App 中,使用者体验比较差,整体流畅度扣分。但进入门槛低,简...原创 2019-06-16 18:47:19 · 1136 阅读 · 0 评论 -
使用Vuex 报错 unknown action type:XXX(未知的操作类型:)
只是想实现一个简单的 count ++ count – 的功能不到半年没使用 vue 突然发现不会用了unknown action type: 这个报错看了许久,耗费了好长时间,中午整明白为什么了看代码:在组件里面调用 actions 下面的方法,一直报错,未知的操作类型,可以自己在store 里面明明定义了嘛。费解。。。。 //this.$store.commit()触发...原创 2019-09-28 17:34:16 · 87409 阅读 · 21 评论 -
vue里的Runtime Only和Runtime Compiler 对比
在我们使用vue-cli的时候,会提示你安装的版本可以看到有两种版本: Runtime Only 版本 和 Runtime+Compiler 版本。1.Runtime Only我们在使用 Runtime Only 版本的 Vue.js 的时候,通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript,因为是在编译阶段做的,所以它只包含运行...转载 2019-10-08 15:22:31 · 488 阅读 · 0 评论 -
Vue组件以及vue传参方式
Vue组件1、组件是什么?是vue.js最强大的功能之一可以扩展html元素,封装可重用的代码2、注册全局组件Vue.component('组件名称',引入的.vue文件)main.jsimport heads from 'src/heads';Vue.component('heads',heads)// 然后在页面直接引用heads标签就可以了3、prop是父组...原创 2019-06-12 08:32:00 · 1005 阅读 · 1 评论 -
Vue动画
Vue动画1、transitionname="" -> 手写animate.cssvelocity.js2、进入动画 从0-1v-enter // 进入前v-enter-active // 定义进入过渡生效时的状态v-enter-to // 定义进入过渡结束时的状态3、离开动画 从1-0v-leave // 离开前v-leave-active /...原创 2019-06-12 08:29:36 · 115 阅读 · 0 评论 -
发布、订阅者模式(发布、订阅、取消监听)附带demo
class Watch{ constructor(props){ this.events={} } on(type,listener){ if(!Array.isArray(this.events[type])){ this.events[type]=[] } this.events[type].push(listener) } emit(type,...reset...原创 2019-05-27 21:02:35 · 465 阅读 · 0 评论 -
react和vue有哪些不同,说说你对这两个框架的看法
react和vue有哪些不同,说说你对这两个框架的看法相同点· 都支持服务器端渲染· 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范· 数据驱动视图· 都有支持native的方案,React的React native,Vue的weex不同点· React严格上只针对MVC的view层,Vue则是MVVM模式· v...原创 2019-05-27 21:15:50 · 1014 阅读 · 0 评论 -
Vue(MVVM)、React(MVVM)、Angular(MVC)对比
React与Vue对比相似点:1.使用 Virtual DOM2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。区别:1.在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要手动实现;在 Vue ...转载 2019-05-28 09:43:56 · 374 阅读 · 0 评论 -
如何正确的做技术选型
概述技术选型是项目的根基,如果选择了不适合自己业务场景的技术。初期由于业务复杂程度和业务量都比较小,所以可能感受不是十分明显,但是到了后期这将会是一个噩梦。会导致系统问题频发,极不稳定,甚至导致项目迭代举步维艰,甚至有的团队会停止新功能的开发,专门修复bug。严重时可能造成重大的经济损失。如何正确的做技术选型,也可参考以下几点:1、实现当前的需求,主要用到哪种技术;2、该技术的成熟度如何,...转载 2019-06-13 09:41:22 · 2201 阅读 · 0 评论 -
前端项目优化点(vue和react优化点)
为什么需要项目优化在互联网快速发展的今天,在实现完功能之后,项目优化是一个被经常提到的话题。很多项目会在开发排期中留大量时间去做一轮又一轮的性能优化,就是为了让页面尽可能早的到达用户,提高交互的流畅程度。在系统可利用系统资源有限的大背景下,3秒呈现内容的原则下,项目优化显得格外重要。每减少0.1秒加载速度可能会给你带来几百甚至几千的用户活跃;每减少100K的内容请求可能会给你带来几千甚至几万...原创 2019-06-13 10:47:13 · 1168 阅读 · 0 评论 -
前后端是如何交互的
iOS,H5,安卓等前端开发的如何跟后台进行交互?应该怎么去规避一些不该属于自己的任务而被后台强加于自己?1.前端请求数据URL由谁来写?在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查询参数也就是URL请求的参数。2.接口文档主要由谁来写?接口文档也是主要由后台开发者...原创 2019-06-13 10:49:02 · 35112 阅读 · 12 评论 -
keep-alive的使用及注意点
以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染。(在开发Vue项目的时候,有一部分部分组件是没必要多次渲染的)keep-alive属性:include - 字符串或正则表达式。只有匹配的组件会被缓存。exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。用法:缓存动态组件:包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们(此种方式并无...原创 2019-06-01 11:58:50 · 6762 阅读 · 0 评论 -
vue原理图
转载 2019-06-14 16:24:32 · 1898 阅读 · 0 评论 -
vue跳转路由
1、下载 npm i vue-router2、main.jsimport VueRouter from ‘vue-router’import Index from ‘./pages/index.vue’2、main.jsVue.use(VueRouter)3、let router = new VueRouter({routes: [{ name: 'index', ...原创 2019-06-11 19:26:52 · 250 阅读 · 0 评论 -
babel知识点
Babel1、Babel是javascript的编译器/解码器/转码器/解析器2、配置.babelrc命令: babel ./index.js -o ./_index.js下包: cnpm install --save-dev babel-cli babel-preset-env { "presets": [ "env...原创 2019-06-11 19:37:08 · 140 阅读 · 0 评论 -
Vuex使用方法(demo)
Vuex1、什么是vuex?每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。2、初始化vuex(1)下载vuexcnpm i vuex -D(2)建一个store文件夹(store/index.js)// 初始化vueximport Vue from 'vue';import Vuex...原创 2019-06-12 08:17:59 · 386 阅读 · 1 评论 -
vue优点、缺点以及vue常用的一些方法
VUE1、Vue是什么?Vue是一个渐进式的javascript开发框架,通过组件的开发,最后进行组件的组合,合并组件形成页面构造器(构造函数)自动化构建工具优点组件化开发单页面路由丰富的Api方法双向的数据绑定单向数据流易于结合其他第三库缺点生态系统不够完善可扩展性稍差1、全局安装 npm install -g vue-cli2、创建项目 v...原创 2019-06-12 08:28:46 · 11364 阅读 · 0 评论 -
Vue一些对比
Vue一些对比一、methods和computedcomputed是计算属性,methods是方法。computed计算属性是基于它们的依赖进行缓存的computed只有在它的相关依赖发生改变时才会重新求值而对于method ,只要发生重新渲染,method 调用总会执行该函数总之:数据量大,需要缓存的时候用computed;每次确实需要重新加载,不需要缓存时用methods二、...原创 2019-06-12 08:29:10 · 478 阅读 · 0 评论 -
vue i18国际化
VUE项目首先我们需要创建一个vue项目。然后在创建vue项目之前,我们本地需要安装nodeJs和git。Git之前下载安装就好,只是基本的命令。什么是nodeJs? Node.js就是这样一个服务器端的、非阻断式I/O的、事件驱动的JavaScript运行环境。进行国际化首先需要准备页面,页面一般创建放在src/view目录下,然后页面需要注册router。vue-i18n 国际化。...原创 2019-05-30 09:10:09 · 2587 阅读 · 0 评论