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.mzph.cn/web/47872.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

四、GD32 MCU 常见外设介绍 (4) EXTI 中断介绍

4.EXTI 中断介绍 EXTI(中断/事件控制器)包含多个相互独立的边沿检测电路并且能够向处理器内核产生中断请求或唤醒事件。 EXTI 有三种触发类型:上升沿触发、下降沿触发和任意沿触发。 EXTI中的每一个边沿检测电路都可以独立配置和屏蔽。 4.1.GD32 EXTI 外设原理简介…

【前端】20种 Button 样式

20种 Button 样式 在前端开发中,Button 按钮的样式设计是提升用户交互体验的重要一环。以下是20种常见的Button样式,这些样式主要基于CSS实现,可以根据具体需求进行调整和组合。 1. 默认样式 CSS 样式:.button { background-co…

自动驾驶---视觉Transformer的应用

1 背景 在过去的几年,随着自动驾驶技术的不断发展,神经网络逐渐进入人们的视野。Transformer的应用也越来越广泛,逐步走向自动驾驶技术的前沿。笔者也在博客《人工智能---什么是Transformer?》中大概介绍了Transformer的一些内容&#xff1a…

setsockopt选项对tcp速度

GPT-4 (OpenAI) 每个setsockopt调用都涉及到一个套接字描述符,一个指定网络层的常数(如IPPROTO_IP, IPPROTO_TCP, IPPROTO_IPV6, SOL_SOCKET等),一个指定需配置的选项的常数,一个指向配置值的指针,以及那个…

Oracle(8)什么是Oracle实例(Instance)?

实例(Instance)是Oracle数据库环境的核心组成部分,它是一组与Oracle数据库相互作用,用于访问和操作数据库对象的后台进程和内存结构。 主要特点 后台进程:这些进程用于支持数据库操作、管理和维护任务,如…

时钟芯片LMK04828调试记录

平台:vivado2018.3 芯片:LMK04828 应用场景:在一些高速ADC和DAC的芯片中,需要时钟芯片对其提供专用的高速时钟,并且往往伴随这jesd204b的时钟产生。所以使用时钟芯片来产生同源时钟。 官方手册下载地址 LMK04828 数…

前端控制器模式

前端控制器模式 介绍 前端控制器模式(Front Controller Pattern)是一种常用的软件设计模式,尤其是在Web应用程序开发中。它提供了一个集中的入口点,用于处理所有客户端请求,并将它们分发给相应的处理程序。这种模式有…

C++实现排序算法

冒泡算法 将元素进行两两比较,将大的元素往后移动 平均时间复杂度是O(n^2),最坏时间复杂度是O(n^2),最好时间复杂度是O(n),排序结果具有稳定性。 这里所提到的稳定性主要是针对相同元素而言的,比如5,5,3进行冒泡排序…

粘包问题、mmap和分片上传

一、粘包问题: 如果一端要把文件发给另一端,要发送两个部分的数据:其一是文件名,用于对端创建文件;另一个部分是文件内容。服务端在接收文件名,实际上并不知道有多长, 所以它会试图把网络缓冲区…

Anaconda下安装配置Jupyter

Anaconda下安装配置Jupyter 1、安装 conda activate my_env #激活虚拟环境 pip install jupyter #安装 jupyter notebook --generate-config #生成配置文件提示配置文件的位置: Writing default config to: /root/.jupyter/jupyter_notebook_config.py检查版本&am…

android studio中svn的使用

第一步,建立一个项目。 第二步,share project。 第三步,选择存放的位置,然后添加提交信息,最后点击share。这样就可以在svn上面看到一个空的项目名称。 第四步,看到文件变成了绿色,点击commit图…

来聊聊redis集群数据迁移

写在文章开头 本文将是笔者对于redis源码分析的一个阶段的最后一篇,将从源码分析的角度让读者深入了解redis节点迁移的工作流程,希望对你有帮助。 Hi,我是 sharkChili ,是个不断在硬核技术上作死的 java coder ,是 CS…

华为OD机考题(HJ61 放苹果)

前言 经过前期的数据结构和算法学习,开始以OD机考题作为练习题,继续加强下熟练程度。 描述 把m个同样的苹果放在n个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法? 注意:如果有7个苹果和3…

C语言 | Leetcode C语言题解之第275题H指数II

题目&#xff1a; 题解&#xff1a; int hIndex(int* citations, int citationsSize) {int left 0, right citationsSize - 1;while (left < right) {int mid left (right - left) / 2;if (citations[mid] > citationsSize - mid) {right mid - 1;} else {left mi…

Java 中的线程

创建线程的三种方式 方式一&#xff1a;继承Thread类 实现步骤&#xff1a; 继承Thread类并重写run()方法&#xff1b; 创建线程并启动。 代码实现&#xff1a; public class MyThread extends Thread {Overridepublic void run() {for(int i0; i<100; i) {System.out…

Linux Vim 由浅入深的教程

引言 原文链接 Vim是Linux系统中非常强大的文本编辑器&#xff0c;因其强大的功能和灵活的操作而受到广泛使用。尤其是在服务器管理和开发环境中&#xff0c;Vim几乎是必备工具。本教程将以CentOS 7为例&#xff0c;详细讲解Vim的安装、基本操作以及一些高级技巧&#xff0c;…

【git】git中的rebase命令解析

在 Git 中&#xff0c; rebase 是一种强大的命令&#xff0c;用于将一个分支的更改重新应用到另一个分支的顶部。它将一个分支的历史记录重新整合到另一个分支上&#xff0c;使得历史记录看起来更干净和线性。这通常用于将一个功能分支的更改合并到主分支&#xff08;如 mast…

ArcGIS Pro SDK (九)几何 5 多边形

ArcGIS Pro SDK &#xff08;九&#xff09;几何 5 多边形 文章目录 ArcGIS Pro SDK &#xff08;九&#xff09;几何 5 多边形1 构造多边形 - 从映射点的枚举2 构造多边形 - 从包络3 获取多边形的点4 获取多边形的各个部分5 枚举多边形的各个部分6 获取多边形的线段7 构建圆环…

Linux应急响应

1.排查账号 进行linux应急响应&#xff0c;首先你得优先查看是否多出来了管理员 &#xff08;1&#xff09;查询特权用户特权用户(uid 为0) awk -F: $30{print $1} /etc/passwd&#xff08;2&#xff09;查询进行远程链接的账号信息 awk /\$1|\$6/{print $1} /etc/shadow …

DB-GPT:LLM应用的集大成者

整体架构 架构解读 可以看到&#xff0c;DB-GPT把架构抽象为7层&#xff0c;自下而上分别为&#xff1a; 运行环境&#xff1a;支持本地/云端&单机/分布式等部署方式。顺便一提&#xff0c;RAY是蚂蚁深度参与的一个开源项目&#xff0c;所以对RAY功能的支持应该非常完善。…