管中窥Vue
博客文章链接:管中窥Vue
Vue
和Angular
、React.js
的相同点和不同点?
与React
的相同:
- 都使用了
Virtual DOM
- 提供了响应式和组件化的视图组件
- 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。
与React
的区别:
组件的响应式渲染
React
的组件的数据状态发生变化时,它会以该组件为根,重新渲染整个组件子树;而Vue
不只去渲染需要渲染的组件。
HTML+CSS
的编写React
使用的JSX
语法,将HTML
、CSS
和JS
混写;而Vue
使用的是templates
模板方式,完全融合与经典的Web
技术。
与Angular
的区别:
- 与
Angular 1
对比,Vue
的性能更加优越,Angular
性能会随着watcher
的增加而变慢,而且Angular
中一些watcher
会触发另一个更新,使得“脏检查循环”可能会运行多次。 Angular
事实上必须用TypeScript
来开发,而且Angular
对于TS
的支持非常全面,而Vue
暂时对于TS
的支持还在改进阶段。Vue
的体积更小,一个包含了vuex + vue-router
的Vue
项目 (30kb gzipped
) 相比使用了这些优化的angular-cli
生成的默认项目尺寸 (~130kb
) 还是要小得多。
Vue
中的MVVM
模型?
Vue
是以数据为驱动的,Vue
自身将DOM
和数据进行绑定,一旦创建绑定,DOM
和数据将保持同步,每当数据发生变化,DOM
会跟着变化。ViewModel
是Vue
的核心,它是Vue
的一个实例。Vue
实例是作用在某个HTML
元素上的,这个HTML
元素可以是body
,也可以是某个id
所指代的元素。DOM Listeners
和Data Bindings
是实现双向绑定的关键。DOM Listeners
监听页面所有View
层DOM
元素的变化,当View
发生变化,Model
层的数据随之变化;Data Bindings
监听Model
层的数据,当数据发生变化,View
层的DOM
元素随之变化。
v-if
和v-show
指令有什么区别?
v-show
对应的值无论是true
还是false
,对应Html
元素都会存在于浏览器的文档中;而v-if
如果是false
的话,直接不在文档中了。
如何阻止
Vue
中的绑定事件不发生冒泡?
- 可以使用“事件修饰符”来处理事件冒泡,如:
v-on:click.stop
阻止事件冒泡或v-on:submit.prevent
阻止默认事件。
父、子组件间是如何通信的?
- 在
Vue
中,每个组件实例的作用域是孤立的。这也意味着不能(也不应该)在子组件的模板内直接应用父组件的数据。父组件通过Props
向子组件传递数据,而子组件通过Events
向父组件传递数据。
非父子层级的组件如何实现通信?
- 简单的应用场景下,可以使用一个空的
Vue
实例作为中央事件总线。 - 在复杂的情况下,可以考虑使用
Vue
官方提供的状态管理模式——Vuex
来进行管理。
什么是动态组件?它的作用是什么?
- 通过使用保留的
<component>
元素,动态地绑定到它的is
特性,我们让多个组件可以使用同一个挂载点,并可以动态地切换。 - 除此之外,
Vue
还提供了keep-alve
指令。keep-alive
指令允许把切换出去的组件保留在内存中,并保留它的状态或避免重新渲染。
为什么组件中的
data
属性的值必须是一个函数?
- 因为在一个组件被多次引用的情况下,如果
data
的值是一个Object
的话,那么由于Object
是一个引用类型,所以即使是该组件被多次引用,而其实操作的是同一个对象,最终导致了引用该组件的所有位置都同步的显示了。
原文地址:https://segmentfault.com/a/1190000016990339
管中窥Vue的更多相关文章
- webstorm中关于vue的一些问题
在进行vue开发中,我使用了webstorm,但是过程坎坷艰辛,遇到了很多问题,我将问题和解决方案贴上,以作参考. 1.vue项目部署在webstorm中,第一个遇到的问题是,webstorm卡住了, ...
- 在pycharm中开发vue
一.在pycharm中开发vue ''' webstorm(vue) pycharm(python) goland(Go语言) idea(java) andrioStuidio(安卓) Php(PHP ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- 在webpack构建的项目中使用vue
一.复习在普通网页中使用vue1.使用script引入vue2.在index中创建 id为app的容器3.通过new vue得到vm实例二.在webpack中尝试使用vue://注意 : 在webpa ...
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
- IDEA 中使用 Vue 提示 namespace is not bound
今天在 IDEA 中使用 vue.js 时提示我如下错误信息 解决方法: 把这个校验项目去掉就可以了.
- webstorn中的vue文件识别es6代码
webstorn中的vue文件识别es6代码 1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => J ...
- webpack 中导入 vue 和普通网页使用 vue 的区别(四)
一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...
- Vue+Typescript中在Vue上挂载axios使用时报错
Vue+Typescript中在Vue上挂载axios使用时报错 在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.t ...
随机推荐
- Java原来如此-随机数
在Java中,生成随机数有两种方法.1是使用Random类.2是使用Math类中的random方法. 我们现在做个例子,比如生成20个0到10之间的随机数. 1.使用Random类的nextInt(n ...
- [原创][FPGA]有限状态机FSM学习笔记(一)
1. 概述--何为有限状态机FSM? 有限状态机-Finite State Machine,简写为FSM,是表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.通常 ...
- SpringUtils写法
@Componentpublic class SpringUtils implements ApplicationContextAware { @Override public void setApp ...
- vbox在共享文件夹设置链接报错Protocol error问题
环境: 基于VBox 的 vagrant (centos版本)开发环境. 问题: Virtualbox 虚拟机(centOS)中,在进行go程序编译的时候,需要设置一个链接符,然后得到了如下的错误: ...
- IOS 后台保持连接
当iphone应用程序进行网络编程时,切到后台后,socket连接会断掉,ios的设计就是这样. 但是好在apple公司也没有那么绝,还是有一些东西可以在后台运行的(backgroundmodes), ...
- [反汇编练习] 160个CrackMe之032
[反汇编练习] 160个CrackMe之032. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
- 转: 写给想成为前端工程师的同学们 (from 360前端团队)
转自: http://www.75team.com/post/to-be-a-good-frontend-engineer.html 前端工程师是做什么的? 前端工程师是互联网时代软件产品研发 ...
- 使用纯CSS3实现一个日食动画
日食现象是月亮挡在了地球和太阳之间,也就是月亮遮挡住了太阳. 所以要构造日食,我们须要2个对象:一个代表月亮,一个代表太阳. <div class="eclipse sun" ...
- vue2.0 + vux 项目搭建
1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...
- leetcode第一刷_Permutation Sequence
这道题还挺好的,假设你的思路是每次生成一个全排列,然后累计到k次,那么停下来吧.肯定超时了亲.. 微软今年的笔试题里有一道类似的,我之前已经提到过了.是唯独0和1的字符串,求第k个排列是什么样子的.这 ...