关于vue学习整理

文章目录

- 一、对于MVVM的理解？
- 二、Vue 实现数据双向绑定的原理：
- 三、Vue 组件间的参数传递
- - - 1.父组件与子组件传值
    - 2.兄弟组件传值
- 四、Vue的路由实现：hash模式和 history模式
- - - hash模式：
    - history模式：
- 五、 Vue与Angular以及React的区别？
- - - 1.与AngularJs的区别
    - 2. 与React的区别
    - 3、vue,angular,react数据双向绑定原理
- 六、Vue路由的钩子函数
- 七、Vuex是什么？怎么使用？那种功能场景使用？
- 八、Keep-Alive
- 九、computed和watch的使用场景？
- - - computed:
    - watch:
- 十、vue组件中data为什么必须是一个函数？
- 十一、对vue渐进式框架的理解？
- 十二、单页面应用和多页面应用区别
- 十三、单页应用首屏加载慢如何解决
- 十四、assets和static的区别
- 其它
- - - 1、vue-loader
    - 2、v-modal
    - 3、v-on可以监听多个方法
    - 4、$nextTick
    - 5、mixins
    - 6、slot
    - 7、router-link
    - 8、v-cloak 指令

一、对于MVVM的理解？

MVVM 是Model - View - ViewModel 的缩写
Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI组件，它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，ViewModel同步View和Model的工作是完全自动的，不需要人为手动操作Dom（监听数据改变，同步界面）

使用mvvm的好处：低耦合性、模块复用、独立开发、便于调试

二、Vue 实现数据双向绑定的原理：

采用数据劫持结合发布者-订阅者模式，通过Object.defineProperty() 来劫持各个属性的getter/setter，在数据变动时通知订阅者，触发相应的回调。
当把一个对象传给vue实例做它的data时，vue将遍历他的属性，用object.definedProperty(),将他们转为setter/getter, 让vue追踪依赖，在属性被访问和修改时通知变化。实际上就是对原生js实现双向数据绑定的封装。

原生js实现数据双向绑定原理如下：

<body><div id="app"><input type="text" id="txt"><p id="show"></p></div>
</body><script type="text/javascript">var obj = {};Object.defineProperty(obj, 'txt', {get: function () {return obj},set: function (newValue) {document.getElementById('txt').value = newValue;document.getElementById('show').innerHTML = newValue;}})document.addEventListener('keyup', function (ev) {obj.txt = ev.target.value;})
</script>

三、Vue 组件间的参数传递

1.父组件与子组件传值

父->子：子组件通过props方法接受数据；
子->父：$emit方法传递参数;

2.兄弟组件传值

EventBus： 事件总线中转站 通过 $e m i t 、$ on传递和接受事件，适合业务逻辑较少的项目
VueX：数据仓库整个项目全局都可以往这个仓库存放数据和读取数据

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
…//兄弟子组件发送事件
//  DecreaseCount.vue
<template><button @click="decrease()">-</button>
</template><script> 
import { EventBus } from "../event-bus.js";export default {name: "DecreaseCount",…methods: {decrease() {EventBus.$emit("decreased", {num:this.num,deg:this.deg});}}}; 
</script><!-- IncrementCount.vue -->
<template><button @click="increment()">+</button>
</template><script> import { EventBus } from "../event-bus.js";export default {name: "IncrementCount",…methods: {increment() {EventBus.$emit("incremented", {num:this.num,deg:this.deg});}}};</script>//接受事件
<script>import IncrementCount from "./components/IncrementCount";import DecreaseCount from "./components/DecreaseCount";import { EventBus } from "./event-bus.js";export default {name: "App",components: {IncrementCount,DecreaseCount},…mounted() {EventBus.$on("incremented", ({num,deg}) => {this.fontCount += numthis.$nextTick(()=>{this.backCount += numthis.degValue += deg;})});EventBus.$on("decreased", ({num,deg}) => {this.fontCount -= numthis.$nextTick(()=>{this.backCount -= numthis.degValue -= deg;})});}}; 
</script>

四、Vue的路由实现：hash模式和 history模式

传统路由：用户访问url时，服务器会接收这个请求，解析url中的路径，执行对应的处理逻辑。
前端路由: 不涉及服务器，前端利用hash或者HTML5的history API来实现.

hash模式：

1、有“#”符号，不美观
2、可用window.location.hash读取，hash虽然在URL中，但不被包括在HTTP请求中，用来指导浏览器动作，对服务端安全无用，hash不会重新加载页面。

history模式：

1、history 采用HTML5的新特性，对低版本浏览器支持性不友好
2、提供了几个个新方法：pushState（）、replaceState（）可以对浏览器历史纪录栈进行修改，但仅仅只是改变history 的记录，并不会刷新、去加载这个URL，popState（）事件监听到状态变更
3、二级页面刷新，报404错误，需要将不存在的路径请求重定向到入口文件

	const state = { 'page_id': 1, 'user_id': 5 }const title = ''const url = '/mp/knowledge'history.pushState(state, title, url);  window.addEventListener("popstate", function() {console.log(url);                                                          });

五、 Vue与Angular以及React的区别？

1.与AngularJs的区别

相同点：
1)都支持指令，内置指令和自定义指令；
2)都支持过滤器：内置过滤器和自定义过滤器；
3)都使用双向数据绑定,组件化开发；
4)都有相应的生命周期钩子函数；
5)都支持es6,es5的写法，都不支持IE8 以下低端浏览器；（低版本浏览器内核版本太低，无法解析 ES2015最新的一些语法。）

不同点：
1)AngularJs的学习成本高，比如Dependency、Injecttion特性，而vue.js更简单、易用，便于快速开发；
2)在性能上，AngularJs依赖对数据做脏检查，所以watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所以的数据都是独立触发的。

2. 与React的区别

相同点：
1)都有快速搭建项目的脚手架
2)组件开发中都支持mixins混淆特性
3)都有生命周期的钩子函数
4)数据双向绑定，组件模块化开发
5)都是基于Virtual DOM模型。
6)都有数据状态管理（vuex，redux）
7)都可以使用axios像后台发请求

不同点：
1)监听数据变化的实现原理不同
2)React可扩展性更好,更适合大型的项目的开发
3)Vue更小，更快，更灵活, 易于开发
4)React采用独特的JSX语法

3、vue,angular,react数据双向绑定原理

AngularJS:
采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。如果是手动对 ViewModel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。
VueJS :
采用的是数据劫持结合发布者-订阅者的方式实现双向绑定，数据劫持主要通过 Object.defineProperty 来实现，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。
React：
采用虚拟DOM树的更新，属性更新，组件自己处理，结构更新，重新“渲染”子树（虚拟DOM），找出最小改动步骤，打包DOM操作，给真实DOM树打补丁单纯从数据绑定来看，React虚拟DOM没有数据绑定，因为setState()不维护上一个状态（状态丢弃）

六、Vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等。一般用于页面title的修改，一些需要登录才能调整页面重定向功能。
beforeEach 主要的3个参数to，from，next；
to : route即将进入的目标路由对象、
from： route当前导航正要离开的路由、
next： function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

七、Vuex是什么？怎么使用？那种功能场景使用？

Vuex: 数据的状态管理器
使用：在main.js引入store，注入。新建一个目录store，目录下面包含actions.js、 mutations.js、 mutation-type.js、 store.js、getters.js等文件，通过export导出。
场景：登录、购物车、兄弟组件之间的通信等全局变量传递

state
Vuex 使用单一状态树，既每个应用将仅仅包含一个store实例，单单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改同步store中的状态或数据，view层通过store.commit来触发方法。
getters
类似vue的计算属性，相当于store的计算属性，主要用来过滤一些数据。
action
action可以理解为通过mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据，view层通过store.dispath来分配action。
modeules
项目特别复杂的时候，可以让每一个模块拥有自己的state，mutation，action，getters，使得结构非常清晰，方便管理, store的模块化

八、Keep-Alive

keep-alive 是Vue内置的一个组件，用来缓存包含的组件
include( 包含的组件缓存）与exclude(排除的组件不缓存，优先级大于include）

<!-- 逗号分隔字符串，组件a与b不被缓存。 -->
<keep-alive exclude="a,b"><component></component>
</keep-alive>
<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/"><component></component>
</keep-alive>
<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']"><component></component>
</keep-alive>

九、computed和watch的使用场景？

computed:

当一个属性受多个属性影响的时候就需要用到computed
示例：购物车商品结算的时候

watch:

当一条数据影响多条数据的时候就需要用watch
示例：搜索数据

十、vue组件中data为什么必须是一个函数？

防止组件的data数据被公用而篡改
data是函数，可以在复用组件时，返回新的data,这样每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。如果公用一个对象的话，一改则全改！

十一、对vue渐进式框架的理解？

之前知乎上有看到一个大牛是这么理解的：

在我看来，渐进式代表的含义是：主张最少。
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。

vue渐进式框架在对比react和angular框架时，会更易理解，
angular: 主张比较强，要求开发者必须使用它的模块机制、依赖注入，具有很强的排他性
react: 主张函数式编程理念，属于软性侵入

vue 相比于前2者，虽然某些方面不足，但它更轻量、灵活，外部依赖最小化，功能实现最大化，没有强主张，可以根据业务需要再逐步扩展。

十二、单页面应用和多页面应用区别

单页：一个项目中所有页面在嵌套在一个主页内，通过动态路由的变化来切换主页的片段，页面跳转只刷新局部资源，用户体验较好。但因为页面渲染的实质是通过js插入的，所以不利于seo搜索引擎的收录，且具有首页加载慢的缺点，更适用于后端管理类项目。

多页：一个项目，由多个独立的页面组成。页面刷新，则整页刷新，一般通过操作dom树，来变更视图。数据交互操作麻烦，但对低版本浏览器兼容性更好。

十三、单页应用首屏加载慢如何解决

1、vue-router 路由懒加载, 在用户访问某个页面时才加载对应页面，节省首次加载的时间
2、使用CDN方式去引入import需要导入的库，然后在build/webpack.base.conf.js文件中配置externals，从打包的bundle文件中排除依赖，减轻vendor.js的负担
3、避免非全局使用的插件在main.js中引用
4、压缩文件，去掉map文件、关闭devtools调试工具
5、安装 webpack-bundle-analyzer插件查看文件大小，进行针对性优化
6 、异步加载组件 vue异步组件使用
7 、换成服务端渲染，如nuxt.js等

补充1：webpack-bundle-analyzer的安装使用流程如下：

// 1. 安装
cnpm install webpack-bundle-analyzer --save-dev// 2. 在/build/webpack.prod.conf.js文件中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 然后配置一下：
plugins: [new BundleAnalyzerPlugin()
]// 3. 在package.json文件中配置：
"scripts": {"analyz": "NODE_ENV=production npm_config_report=true npm run build"
}// 4. 运行（会自动在浏览器打开：http://127.0.0.1:8888/）
npm run build

补充2：解释一下CDN（Content Delivery Network）：内容分发网络
CDN可以把原服务器上数据复制到其他服务器上，用户访问时，服务器会就近分发网络数据。
CDN加速优点是成本低，速度快。适合访问量比较大的网站

十四、assets和static的区别

共同点：都是用来存放静态文件的文件夹
不同点：是否走打包流程
assets：是/src文件夹子文件夹，执行打包命名时（npm run build），会被同步打包，既：assets下的静态资源会被压缩处理后，放入/static文件内，同index.html文件一起部署到服务器。所以，一般用来放自己写的组件所需要的静态资源。
static：与/src文件夹同级，不会被打包压缩，一般用来放一些已被压缩处理过的第3方插件的静态资源。

其它

1、vue-loader

vue的加载器，集成vue-loader后，可以支持es6语法、动态预编译样式less、sass，jade、vue模板编译等

2、v-modal

v-model用于表单数据的双向绑定，其实它就是一个语法糖，
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。

3、v-on可以监听多个方法

写法如： <input type=“text” v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

4、$nextTick

data值渲染更新到dom元素之后在获取

5、mixins

6、slot

可以理解为：父组件在子组件内占的一块区域，父组件可以自定义DOM元素去替换这个区域
slot负责分发，name相同的slot对应替换

7、router-link

vue的路由元素，相当于html中的a标签
可以通过安装babel polypill插件，解决安卓上点击失效的问题
可以通过Router.navigate方法，解决IE和Firefox中不起作用（路由不跳转）的问题
可以通过@click.native，解决注册在router-link上click事件无效的问题
因为默认router-link会阻止click事件，.native指直接监听一个原生事件

8、v-cloak 指令

v-cloak 指令是解决屏幕出现闪动

以上内容部分来源于网络，侵权删，如有错误，欢迎指出！

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

哪家美容院做做完双眼皮显老
...
2024/4/27 22:18:12
双眼皮一个星期恢复
...
2024/4/28 1:35:16
埋线好还是双眼皮好不好
...
2024/4/28 16:50:22
一点双眼皮效果永久吗
...
2024/4/28 2:08:15
angular怎么配置路由
angular配置路由超级简单，分为以下三个步骤： 在html里写超链接标签，可以使用ui-sref框架，给跳转的页起名字，超链接标签里写好要跳转的链接。如下所示：<a ui-sref".queryTVTime" class"fo…...
2024/4/26 10:27:35
什么方法做双眼皮好啊
...
2024/4/28 18:16:48
【前端】11.Angular 中的路由
参考视频： https://www.bilibili.com/video/av50917863?p13 https://www.bilibili.com/video/av50917863?p14 https://www.bilibili.com/video/av50917863?p15 Angular8视频教程-IT营配套笔记如下（参考自大地老师）： 一、Angu…...
2024/4/20 19:24:40
angular路由参数,Angular 2可选路由参数
Is it possible to have an optional route parameter in the Angular 2 route? I tried the Angular 1.x syntax in RouteConfig but received below error:"ORIGINAL EXCEPTION: Path "/user/:id?" contains "?" which is not allowed in a rout…...
2024/4/20 19:24:38
双眼皮冰敷还是热敷
...
2024/4/28 6:17:04
菜鸟踩坑记录汇总
1.json文件里面不能添加注释//或者/**/ 今天想当然的用//注释了一条json文件中的语句，结果编译时，运行npm install出现错误，分析了一下错误信息发现是注释惹的祸。 JSON结构： 名称/值对的集合：key : value样式&#x…...
2024/4/28 13:35:18
公司基础开发平台(xxxx)-前端组件Api
文章目录xxx VueOverview前端技术项目下载和运行前端常用组件说明JDate 日期组件使用文档说明: antd-vue日期组件需要用moment中转一下，用起来不是很方便，特二次封装，使用时只需要传字符串即可参数配置使用示例JSuperQuery 高级查询使用文档…...
2024/4/28 0:18:48
【练习】事件白名单
1、bootstrap栅格超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面显示器 (≥992px)大屏幕大桌面显示器 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C.container 最大宽度None （自动&#xf…...
2024/4/21 5:23:13
做双眼皮艺星u
...
2024/4/27 23:18:32
html语言三层,Html5面试题
原标题：Html5面试题戳“阅读原文！HTML相关1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTM…...
2024/4/27 22:54:55
AngularJS使用笔记
AngularJS使用笔记简介核心特性1：MVC模式核心特性2：模块化核心特性3：数据的双向绑定核心特性4：依赖注入核心特性5：语义化标签摘抄AngularJS的常用指令AngularJS的常用事件AngularJS的常用服务AngularJS的全局APIAngula…...
2024/4/28 16:16:43
关于前端的思考与感悟
万事开头难。当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候，突然就深刻的体会到了这句话确实太有道理了。最近几年对于web前端的传闻很多，比如人才稀缺，简单易学，待遇丰厚，整体势头发展良好等等。遇到…...
2024/4/27 23:29:25
WEB前端开发的思考与感悟
当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候，突然就深刻的体会到了这句话确实太有道理了。最近几年对于web前端的传闻很多，比如人才稀缺，简单易学，待遇丰厚，整体势头发展良好等等。遇到过一个不太熟…...
2024/4/21 5:23:07
关于WEB前端开发的思考与感悟
万事开头难。当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候，突然就深刻的体会到了这句话确实太有道理了。最近几年对于web前端的传闻很多，比如人才稀缺，简单易学，待遇丰厚，整体势头发展良好等等。遇到…...
2024/4/21 5:23:06
ui-grid应用（调整了表格行高）+指定列模糊查询+联动搜索
最近在应用ng-grid升级版的ui-grid,就顺便记录了这篇文章； angular1.3.2bootstrap3.X 直接上代码 view: <div ng-controller"listCtrl"> <!-- <div class"text-left wrapper-md" style"padding-top: 0; padding-botto…...
2024/4/21 5:23:05
用angularjs遇到的一些问题及解决方案
**这是我之前用ionic做ios客户端的时候遇到的一些问题，当时因为没有写博客，所以记录到word里，现在将它分享出来，供大家参考参考，也希望给一些宝贵意见。 Ionic是一个前端的框架，帮助开发者使用HTML5, CSS3…...
2024/4/21 5:23:05

关于vue学习整理

文章目录

一、对于MVVM的理解？

二、Vue 实现数据双向绑定的原理：

三、Vue 组件间的参数传递

1.父组件与子组件传值

2.兄弟组件传值

四、Vue的路由实现：hash模式和 history模式

hash模式：

history模式：

五、 Vue与Angular以及React的区别？

1.与AngularJs的区别

2. 与React的区别

3、vue,angular,react数据双向绑定原理

六、Vue路由的钩子函数

七、Vuex是什么？怎么使用？那种功能场景使用？

八、Keep-Alive

九、computed和watch的使用场景？

computed:

watch:

十、vue组件中data为什么必须是一个函数？

十一、对vue渐进式框架的理解？

十二、单页面应用和多页面应用区别

十三、单页应用首屏加载慢如何解决

十四、assets和static的区别

其它

1、vue-loader

2、v-modal

3、v-on可以监听多个方法

4、$nextTick

5、mixins

6、slot

7、router-link

8、v-cloak 指令

相关文章

最新文章

关于vue学习整理

文章目录

一、对于MVVM的理解？

二、Vue 实现数据双向绑定的原理：

三、Vue 组件间的参数传递

1.父组件与子组件传值

2.兄弟组件传值

四、Vue的路由实现：hash模式 和 history模式

hash模式：

history模式：

五、 Vue与Angular以及React的区别？

1.与AngularJs的区别

2. 与React的区别

3、vue,angular,react数据双向绑定原理

六、Vue路由的钩子函数

七、Vuex是什么？怎么使用？那种功能场景使用？

八、Keep-Alive

九、computed和watch的使用场景？

computed:

watch:

十、vue组件中data为什么必须是一个函数？

十一、对vue渐进式框架的理解？

十二、单页面应用和多页面应用区别

十三、单页应用首屏加载慢如何解决

十四、assets和static的区别

其它

1、vue-loader

2、v-modal

3、v-on可以监听多个方法

4、$nextTick

5、mixins

6、slot

7、router-link

8、v-cloak 指令

相关文章

最新文章

四、Vue的路由实现：hash模式和 history模式