博客文章链接:管中窥Vue

VueAngularReact.js的相同点和不同点?

React的相同:

  • 都使用了Virtual DOM
  • 提供了响应式和组件化的视图组件
  • 将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。

React的区别:

  • 组件的响应式渲染

    • React的组件的数据状态发生变化时,它会以该组件为根,重新渲染整个组件子树;而Vue不只去渲染需要渲染的组件。
  • HTML+CSS的编写

    • React使用的JSX语法,将HTMLCSSJS混写;而Vue使用的是templates模板方式,完全融合与经典的Web技术。

Angular的区别:

  • Angular 1对比,Vue的性能更加优越,Angular性能会随着watcher的增加而变慢,而且Angular中一些watcher会触发另一个更新,使得“脏检查循环”可能会运行多次。
  • Angular事实上必须用TypeScript来开发,而且Angular对于TS的支持非常全面,而Vue暂时对于TS的支持还在改进阶段。
  • Vue的体积更小,一个包含了 vuex + vue-routerVue 项目 (30kb gzipped) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~130kb) 还是要小得多。

Vue中的MVVM模型?

  • Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。
  • ViewModelVue的核心,它是Vue的一个实例。Vue实例是作用在某个HTML元素上的,这个HTML元素可以是body,也可以是某个id所指代的元素。 DOM ListenersData Bindings是实现双向绑定的关键。DOM Listeners监听页面所有ViewDOM元素的变化,当View发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。

v-ifv-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的更多相关文章

  1. webstorm中关于vue的一些问题

    在进行vue开发中,我使用了webstorm,但是过程坎坷艰辛,遇到了很多问题,我将问题和解决方案贴上,以作参考. 1.vue项目部署在webstorm中,第一个遇到的问题是,webstorm卡住了, ...

  2. 在pycharm中开发vue

    一.在pycharm中开发vue ''' webstorm(vue) pycharm(python) goland(Go语言) idea(java) andrioStuidio(安卓) Php(PHP ...

  3. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  4. 在webpack构建的项目中使用vue

    一.复习在普通网页中使用vue1.使用script引入vue2.在index中创建 id为app的容器3.通过new vue得到vm实例二.在webpack中尝试使用vue://注意 : 在webpa ...

  5. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  6. IDEA 中使用 Vue 提示 namespace is not bound

    今天在 IDEA 中使用 vue.js 时提示我如下错误信息 解决方法: 把这个校验项目去掉就可以了.

  7. webstorn中的vue文件识别es6代码

    webstorn中的vue文件识别es6代码 1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => J ...

  8. webpack 中导入 vue 和普通网页使用 vue 的区别(四)

    一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...

  9. Vue+Typescript中在Vue上挂载axios使用时报错

    Vue+Typescript中在Vue上挂载axios使用时报错 在vue项目开发过程中,为了方便在各个组件中调用axios,我们通常会在入口文件将axios挂载到vue原型身上,如下: main.t ...

随机推荐

  1. Java原来如此-随机数

    在Java中,生成随机数有两种方法.1是使用Random类.2是使用Math类中的random方法. 我们现在做个例子,比如生成20个0到10之间的随机数. 1.使用Random类的nextInt(n ...

  2. [原创][FPGA]有限状态机FSM学习笔记(一)

    1. 概述--何为有限状态机FSM? 有限状态机-Finite State Machine,简写为FSM,是表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.通常 ...

  3. SpringUtils写法

    @Componentpublic class SpringUtils implements ApplicationContextAware { @Override public void setApp ...

  4. vbox在共享文件夹设置链接报错Protocol error问题

    环境: 基于VBox 的 vagrant (centos版本)开发环境. 问题: Virtualbox 虚拟机(centOS)中,在进行go程序编译的时候,需要设置一个链接符,然后得到了如下的错误: ...

  5. IOS 后台保持连接

    当iphone应用程序进行网络编程时,切到后台后,socket连接会断掉,ios的设计就是这样. 但是好在apple公司也没有那么绝,还是有一些东西可以在后台运行的(backgroundmodes), ...

  6. [反汇编练习] 160个CrackMe之032

    [反汇编练习] 160个CrackMe之032. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  7. 转: 写给想成为前端工程师的同学们 (from 360前端团队)

    转自:     http://www.75team.com/post/to-be-a-good-frontend-engineer.html 前端工程师是做什么的? 前端工程师是互联网时代软件产品研发 ...

  8. 使用纯CSS3实现一个日食动画

    日食现象是月亮挡在了地球和太阳之间,也就是月亮遮挡住了太阳. 所以要构造日食,我们须要2个对象:一个代表月亮,一个代表太阳. <div class="eclipse sun" ...

  9. vue2.0 + vux 项目搭建

    1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...

  10. leetcode第一刷_Permutation Sequence

    这道题还挺好的,假设你的思路是每次生成一个全排列,然后累计到k次,那么停下来吧.肯定超时了亲.. 微软今年的笔试题里有一道类似的,我之前已经提到过了.是唯独0和1的字符串,求第k个排列是什么样子的.这 ...