当前位置: 首页 > news >正文

VUE中的重点*

1.MVC 和 MVVM的区别?

MVC:M(model数据)、V(view视图),C(controlle控制器)
缺点是前后端无法独立开发,必须等后端接口做好了才可以往下走;
前端没有自己的数据中心,太过依赖后台

MVVM:M(model数据)、V(view视图)、VM(viewModel控制数据的改变和控制视图)
html部分相当于View层,可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素,
当ViewModel对Model进行更新时,通过数据绑定更新到View。 
Vue实例中的data相当于Model层,而ViewModel层的核心是Vue中的双向数据绑定,
即Model变化时VIew可以实时更新,View变化也能让Model发生变化

MVVM与MVC最大的区别就是:它实现了View和Model的自动同步,
也就是当Model的属性改变时,我们不用再自己手动操作Dom元素,来改变View的显示,
而是改变属性后该属性对应View层显示会自动改变

2. v-model 原理?

是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调从而达到数据和视图同步。

3.vue中的data为什么是一个函数?

实际上就是一个闭包,因为vue是单页面应用,是由很多组件构成,每一个组件中都有一个data, 所以通过闭包给每一个组件创建了一个私有的作用域,这样就不会相互影响。

4.打包后 dist 目录过大,解决办法?

dist打包生成的文件中有 .map 文件,可以删除。在 vue.config.js文件中配置:productionSourceMap: false
组价和路由使用懒加载、按需引入等
对于文件和图片进行压缩。 安装压缩组件: compression-webpack-plugin
安装后进行导入配置:
最小化代码 minisize: true
分割代码: splitChunksl
超过限定值的文件进行压缩,threshold: 文件大小(字节为单位)

5.你使用过 Vuex 吗?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。

  • (1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  • (2)改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

主要包括以下几个模块:

  • State => 基本数据,定义了应用状态的数据结构,可以在这里设置默认的初始状态。
  • Getter => 从基本数据派生的数据,允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
  • Mutation => 是唯一更改 store 中状态的方法,且必须是同步函数。
  • Action => 像一个装饰器,包裹mutations,使之可以异步。用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
  • Module => 模块化Vuex,允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
http://www.lryc.cn/news/407439.html

相关文章:

  • rabbitmq生产与消费
  • spring-boot3.x整合Swagger 3 (OpenAPI 3) +knife4j
  • SM2隐式证书用户公私钥生成python代码实现
  • IEC104转MQTT网关快速实现了IEC104到MQTT的转换和数据交互
  • 【OpenCV C++20 学习笔记】调节图片对比度和亮度(像素变换)
  • web UI自动化测试 浏览器模式设置
  • OpenCV图像滤波(1)双边滤波函数bilateralFilter的使用
  • 前端开发使用Big.js精算避免误差
  • 在 Ubuntu 22.04/20.04 安装 CVAT 和 SAM 指南
  • 【SpringCloud】 微服务分布式环境下的事务问题,seata大合集
  • vite5+vue3开发阅读APP实战笔记20240725
  • Intel任命Micron技术开发主管领导Intel Foundry制造运营
  • 苹果发布iOS 18 Beta 4,新增CarPlay 壁纸等多项功能改进
  • 谷粒商城实战笔记-50-51-商品分类的删除
  • vue3+g2plot实现词云图
  • Golang | Leetcode Golang题解之第273题整数转换英文表示
  • 使用C#手搓Word插件
  • WordPress主题追格企业官网主题免费开源版V1.1.6
  • uniapp引入自定义图标
  • pytorch-scheduler(调度器)
  • 防火墙与入侵检测系统(IDS/IPS)在现代网络安全中的关键角色
  • Python 之 os、open、json、pickle 模块的“疯狂”探险记
  • CTF-Web习题:2019强网杯 UPLOAD
  • Unity环境渲染与反射探针的深入探索
  • vue3 父组件 props 异步传值,子组件接收不到或接收错误
  • [C++]TinyWebServer
  • Uniswap价格批量查询与ws订阅行情
  • vue 实战 区域内小组件元素拖拽 示例
  • C++多线程编程中的锁详解
  • van-dialog 组件调用报错