放肆青春的博客
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)

放肆青春

一个前端菜鸟的技术成长之路
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)
  • 前端

    • 前端 概览
    • 前端汇总

    • front 博文

    • front 项目总结

    • front 高级

    • front tools

  • vue

    • vue 概览
    • vue 汇总

    • vue 博文

      • vue对比
        • vue 对比
          • vue 和 react 区别
          • vue 和 jquery 区别
          • watch 和 computed 区别
          • v-if 和 v-show 的区别
          • Proxy 和 Object.defineProperty 的对比
          • template 与 render 函数对比
      • vue-router
      • vuex
      • vue2生命周期
      • vue组件通信
      • vue修饰符
      • vue异步组件
      • vue插槽
      • vue2 hook
    • vue 项目总结

    • vue 高级

  • html

    • html 概览
    • html 汇总

    • html 博文

  • css

    • css 概览
    • css 汇总

    • css 博文

    • sass

    • less

  • js

    • javascript 概览
    • JS 汇总

    • ES6

    • JS 博文

    • JS 工具

  • node

    • node 概览
    • node 汇总

    • node 框架

    • node 博文

  • react

    • react 概览
    • react 汇总

    • react 博文

    • react 高级

  • 微信小程序

    • 微信小程序 概览
    • 微信小程序总结
    • 微信小程序文章
    • 微信小程序 博文

    • 微信小程序 高级

  • 微信公众号

    • 微信公众号 概览
    • 微信公众号总结
    • 微信公众号文章
  • 多端开发

    • 多端开发
    • dsbridge 概览
    • jsbridge 概览
    • webview
    • uniapp

      • uniapp 概览
    • taro

      • taro 概览
    • flutter

      • flutter 概览
      • flutter 环境搭建
    • electron

      • electron 概览
  • front
放肆青春
2021-10-09

vue对比

# vue 对比

# vue 和 react 区别

相同点:数据驱动视图、组件化、使用 Virtual DOM

  1. 数据流不同。

react 从诞生开始就推崇单向数据流,而 Vue 是双向数据绑定

  1. 数据变化的实现原理不同。

react 使用的是不可变数据(手动 setState),而 Vue 使用的是可变的数据

  1. 模板渲染方式的不同

react 是通过 JSX 渲染模板,Vue 是通过一种拓展的 HTML 语法进行渲染

# vue 和 jquery 区别

  1. vue 双向数据绑定

在 Vue 中数据改变,视图无需刷新即可实时改变,而 jQuery 中数据改变,视图需要用户手动刷新才会改变。

  1. 性能-减少 dom 的操作

vue 使用了虚拟 dom 技术,能够减少 dom 操作

  1. 组件化

Vue 组件具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用

Vue 组件的优势就是组件进行重复使用,便于协同开发,提高开发效率。

# watch 和 computed 区别

  1. 缓存支持

watch 不支持缓存,数据变,直接会触发相应的操作;

computed 支持缓存,只有依赖数据发生改变,才会重新进行计算

  1. 异步支持

watch 支持异步;

computed 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化

  1. 使用场景

watch 当一个属性发生变化时,需要执行对应的操作;一对多或者一对一;

computed 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用 computed

# v-if 和 v-show 的区别

  1. 控制手段不同

v-show 隐藏则是为该元素添加 css--display:none,dom 元素依旧还在。v-if 显示隐藏是将 dom 元素整个添加或删除

  1. 编译过程不同

v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show 只是简单的基于 css 切换

  1. 编译条件不同

v-if 是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时,并不做操作,直到为真才渲染

v-show 不管初始条件是什么,元素总是会被渲染

  1. 性能消耗

v-if 有更高的切换消耗;v-show 有更高的初始渲染消耗

  1. 使用场景

如果需要非常频繁地切换,则使用 v-show 较好

如果在运行时条件很少改变,则使用 v-if 较好

# Proxy 和 Object.defineProperty 的对比

  1. Proxy 是直接代理对象;而 Object.defineProperty 只能劫持对象的属性,

  2. Proxy 能监听对象的新增和删除操作;Object.defineProperty 不能监听对象的新增和删除操作,通过 Vue.set()和 Vue.delete 来实现响应式的。

  3. Proxy 可以直接监听数组的变化;Object.defineProperty 本身是有监控数组下标变化的能力的,只是在 Vue 的实现中,从性能/体验的性价比考虑

  4. Proxy 支持 13 种拦截操作,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的。

  5. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的;而 Object.defineProperty 只能遍历对象属性直接修改;

  6. Proxy 兼容性差;Object.defineProperty 兼容性好,支持 IE9,

  7. Proxy 有性能问题但是有新标准性能红利,从长远来看,JS 引擎会继续优化 Proxy

# template 与 render 函数对比

相同之处:

render 函数 跟 template 一样都是创建 html 模板

不同之处:

  1. Template 适合逻辑简单,render 适合复杂逻辑。

  2. 使用者 template 理解起来相对容易,但灵活性不足;自定义 render 函数灵活性高,但对使用者要求较高。

  3. render 的性能较高,template 性能较低。使用 render 函数渲染没有编译过程,相当于使用者直接将代码给程序。所以,使用它对使用者要求高,且易出现错误

  4. Render 函数的优先级要比 template 的级别要高,但是要注意的是 Mustache(双花括号)语法就不能再次使用

更新时间: 1/25/2022, 8:44:55 PM
vant汇总
vue-router

← vant汇总 vue-router→

最近更新
01
前端权限管理
02-24
02
vue2指令
02-24
03
vue2 hook
02-24
更多文章>
Theme by Vdoing | Copyright © 2019-2022 放肆青春
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式