【Vue】灵魂拷问

1、说说Vue的优缺点

  • 优点:渐进式,组件化,轻量级,虚拟dom,响应式,单页面路由,数据与视图分开
  • 缺点:单页面不利于seo,不支持IE8以下,首屏加载时间长

2、为什么说Vue是一个渐进式框架

渐进式就是你想用 vuex 就用,不用也行,你想用 component 就用,不用也可以,或者你可以选择不用,或者只选几样去用

3、MVVM是什么?和MVC有何区别呢?

  • MVVM
    VM: 也就是View-Model,数据的双向绑定将【模型】转化成【视图】,即后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM事件监听。
  • MVC
    Model(模型):负责从数据库中取数据.
    View(视图):负责展示数据的地方
    Controller(控制器):用户交互的地方,例如点击事件等等,思想:Controller 将 Model 的数据展示在 View 上
  • 区别
    整体看来,MVVM 比MVC精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作DOM元素。因为在MVVM 中,View不知道 Model的存在,Model和ViewModel也观察不到View,这种低耦合模式提高代码的可重用性。Vue是MVVM框架,但是不是严格符合MVVM,因为MVVM规定Model和View不能直接通信,而Vue的ref可以做到这点。

4、Vue生命周期

  • beforeCreate:实例话Vue,未初始化和响应式数据
  • created:已初始化和响应式数据,可访问数据
  • beforeMount:render调用,虚拟DOM生成,未转真实DOM
  • mounted:真实DOM挂载完成
  • beforeUpdate:数据更新,新虚拟DOM生成
  • updated:新旧虚拟DOM进行对比,打补丁,然后进行真实DOM更新
  • beforeDestroy:实例销毁前,仍可访问数据
  • destroy:实例销毁,子实例销毁,指令解绑,解绑本实例的事件
  • activated:keep-alive所缓存组件激活时调用
  • deactivated:keep-alive所缓存组件停用时调用
  • errorCaptured:子孙组件的错误捕获,此函数可返回false阻止继续向上传播

5、Vue修饰符

  • .once:事件只触发一次
  • .number:将v-medol绑定的值转数字
  • .trim:讲v-model绑定的值首位空格给去掉
  • .stop:阻止事件冒泡
  • .capture:事件的捕获
  • .self:点击事件绑定本身才触发
  • .lazy:输入框失焦时才会更新v-model的值
  • .prevent:阻止默认事件
  • .native:绑定事件在自定义组件上时,确保能执行
  • .left、.middle、.right:鼠标左中右键的触发
  • passive:相当于给移动端滚动事件加一个.lazy
  • camel:确保变量名会被识别成驼峰命名
  • .sync:简化子修改父值的步骤

6、Vue内部指令

  • v-text:元素的textContent
  • v-html:元素的innerHTML
  • v-show:通过样式display改变显隐,控制的css
  • v-if:通过操作DOM改变显隐
  • v-else:配合v-if
  • v-else-if:配合v-else
  • v-for:循环渲染
  • v-on:绑定事件,缩写@
  • v-bind:绑定变量,缩写:
  • v-model:双向绑定
  • v-slot:插槽
  • v-once:只渲染一次
  • v-pre:跳过元素编译
  • v-cloak:隐藏双括号,有值显示

7、v-if 和 v-show 有何区别?

  • v-if:通过操作DOM来控制显隐,适用于偶尔的情况,因为每一次执行它都要生成和销毁,v-if有着更高的切换消耗
  • v-show:通过改变css样式display属性控制显隐,适用于频繁显隐的情况,不会销毁,v-show在初始渲染消耗更高点
    频繁或者大数量显隐使用v-show ,否则使用v-if

8、为什么 v-if 和 v-for 不建议用在同一标签?

v-for 优先级高于 v-if,每项都通过 v-for 渲染出来后再去通过 v-if 判断显隐,过程中会增加无用的 dom 操作,渲染了无用的节点

9、如何设置动态class,动态style?

  • 动态class对象:<div :class="{ 'is-active': true, 'red': isRed }"></div>
  • 动态class数组:<div :class="['is-active', isRed ? 'red' : '' ]"></div>
  • 动态style对象:<div :style="{ color: textColor, fontSize: '18px' }"></div>

10、为什么不建议用index做key,为什么不建议用随机数做key?

用index和用随机数都是同理,随机数每次都在变,做不到专一性,也很消耗性能

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/602462.shtml

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

相关文章

第14课 利用openCV快速数豆豆

除了检测运动&#xff0c;openCV还能做许多有趣且实用的事情。其实openCV和FFmpeg一样都是宝藏开源项目&#xff0c;貌似简单的几行代码功能实现背后其实是复杂的算法在支撑。有志于深入学习的同学可以在入门后进一步研究算法的实现&#xff0c;一定会受益匪浅。 这节课&#…

(Python + Selenium4)Web自动化测试自学Day1

目录 文章声明⭐⭐⭐让我们开始今天的学习吧&#xff01;自动打开Chrome浏览器实现自动搜索元素定位常用的元素定位方式By.IDBy.CLASS_NAMEBy.TAG_NAMEBy.NAMEBy.LINK_TEXTBy.PARTIAL_LINK_TEXTBy.CSS_SELECTOR根据id定位根据class定位根据属性定位组合定位 By.XPATH 文章声明⭐…

js的for嵌套和数组的map+some两种方法实现两个对象数组进行比对,得到一个期望的新数组

项目需求有个数据需要处理,现有两个数组arr1和arr2,其中 arr1为[“香蕉”, “苹果”, “梨子”],arr2为 [{ checked: true, name: “苹果” }] ,现在想实现的目的是,只要有arr1里的项与arr2项里的name一致的话就将其checked设为true,否则设为false,最终得到的数组是arr3,…

#error 在C语言中的作用

1、#error命令是C/C语言的预处理命令之一 #error 是C语言中的预处理指令之一&#xff0c;用于在编译时生成一个错误消息。当编译器遇到 #error 指令时&#xff0c;会立即停止编译&#xff0c;并将指定的错误消息输出到编译器的错误信息中。 在给定的代码中&#xff0c;#error…

ubuntu/linux 如何在虚拟环境中下载MPI-IS mesh

麻了&#xff0c;又碰到这个库了&#xff0c;记录一下&#xff0c;希望对大家有用 下载代码&#xff1a;https://github.com/MPI-IS/mesh 安装libboost-dev sudo apt-get install libboost-dev激活自己的虚拟环境&#xff0c;下面的操作在自己的虚拟环境里进行 在mesh-master…

vivado 不支持的SDC命令

不支持以下SDC命令。 • set_clock_gating_check • set_clock_transition • set_ideal_latency • set_ideal_network • set_ideal_transition • set_max_fanout • set_drive • set_driving_cell • set_fanout_load • set_input_transition • se…

玩转Mysql 二(MySQL的目录结构与表结构)

一路走来,所有遇到的人,帮助过我的、伤害过我的都是朋友,没有一个是敌人。 一、MYSQL目录结构及命令存放路径 1、查看MYSQL数据文件存放路径 mysql> show variables like datadir; 注意:生成环境要提前规划好数据存放目录,存储一般以T为单位闪盘。 2、MYSQL命令存放…

系统学习Python——类(class):静态方法(staticmethod)和类方法(classmethod)-[基础知识]

分类目录&#xff1a;《系统学习Python》总目录 我们可以在类中定义两种方法&#xff0c;它们不需要一个实例就可以被调用&#xff1a;静态方法&#xff08;staticmethod&#xff09;大致与一个类中简单的无实例函数的工作方式类似&#xff0c;而类方法则被传人一个类而不是一个…

Note: A Woman Doctor Lina

A woman doctor Lina 女医生丽娜 Born in a pigs’ nest, Lina led a poor life in her childhood. 出生在猪圈里&#xff0c;丽娜过着贫穷的童年生活。 led nest She was looked down upon by the children of her generation. 她被她同时代的孩子瞧不起。 generation look…

day 38 动态规划(1)

day38 代码随想录 2024.1.6 开始动态规划&#xff01; 递归五部曲&#xff1a; 确定dp数组含义确定递推公式dp数组初始化遍历顺序举例推导dp数组 1. 50斐波那契数列 经典的动态规划入门第一题&#xff0c;直接递归五部曲&#xff0c; 本题递归数组是具体要求的值&#xff0c…

每日一题 - 240106 - D - Loong and Takahashi

D - Loong and Takahashi TAG - 回形矩阵 回形矩阵 回形矩阵时间复杂度 - O ( N N ) O(N \times N) O(NN) // #include<bits/stdc.h> using namespace std; // #define int long long const int N50; int g[N][N];void solve() {int n;scanf("%d",&n )…

私有云平台搭建openstack和ceph结合搭建手册

OpenStack与云计算 什么是云&#xff1f; 如何正确理解云&#xff0c;可以从以下几个方面。 云的构成。 用户&#xff1a;对用户而言是透明无感知的&#xff0c;不用关心底层构成&#xff0c;只需要知道利用云完成自己任务即可。 云提供商&#xff1a;对云资产管理和运维。 云…

CentOS安装JDK

目录 一、文件准备 1、目录创建 2、导入jdk压缩文件 3、解压压缩包 二、配置 1.配置环境变量 2.使用source命令生效环境变量 3、测试 总结 一、文件准备 1、目录创建 在/usr/local下创建java 目录 2、导入jdk压缩文件 3、解压压缩包 tar -zxf jdk-8u201-linux-x64.t…

[C#]使用onnxruntime部署yolov8-onnx印章检测

【官方框架地址】 https://github.com/ultralytics/ultralytics.git 【算法介绍】 YOLOv8是目标检测领域中的一种先进算法&#xff0c;它是YOLO&#xff08;You Only Look Once&#xff09;系列算法的最新发展。YOLO算法以其高效和实时的性能而著名&#xff0c;而YOLOv8则进一…

计算机毕业设计----ssm大学生兼职论坛

项目介绍 该项目是一个大学生校园兼职平台&#xff0c;分为前台和后台功能&#xff0c;主要用户有三种角色&#xff1a;分别是商家、学生、管理员。商家可以发布兼职信息&#xff0c;发布后&#xff0c;管理员进入后台确认信息是否有效&#xff0c;并且审核该兼职信息。学生登…

vue接入高德地图

使用 JSAPI 安全模式,代理服务请以_AMapService 作为一级路由 index.html <script type"text/javascript">window._AMapSecurityConfig {serviceHost: "http://xx.xx.xx.xx:8223/_AMapService"};</script><script type"text/javascr…

gRPC - gRPC 整合 SpringBoot(全代码 + 避坑!)

目录 一、gRPC 整合 SpringBoot 1.1、创建项目 1.2、天坑&#xff08;看前须知&#xff09;&#xff01; 1.2.1、天坑背景 1.2.2、解决天坑 1.3、api 开发 1.4、server 开发 1.5、client 开发 1.6、演示效果 一、gRPC 整合 SpringBoot 1.1、创建项目 api&#xff1a;编…

关于图像分类任务中划分数据集,并且生成分类类别的josn字典文件

1. 前言 在做图像分类任务的时候&#xff0c;数据格式是文件夹格式&#xff0c;相同文件夹下存放同一类型的类别 不少网上的数据&#xff0c;没有划分数据集&#xff0c;虽然代码简单&#xff0c;每次重新编写还是颇为麻烦&#xff0c;这里记录一下 如下&#xff0c;有的数据…

大语言模型的幻觉:解析、成因及解决方法

目录 前言1 大语言模型的幻觉现象解析1.1 输入冲突幻觉&#xff08;Input-conflicting&#xff09;1.2 上下文冲突幻觉&#xff08;Context-conflicting&#xff09;1.3 事实冲突幻觉&#xff08;Fact-conflicting&#xff09; 2 幻觉产生的原因2.1 数据偏差和模型缺陷2.2 知识…

“人家赚那么多”系列03:如何慢速练习?

01 慢速练习 慢速练习是学习和发展中常用的基本技巧。 比如说&#xff0c;当你初学吉他时&#xff0c;开始时肯定是以比预期速度慢得多的节奏&#xff0c;逐段逐段地演奏&#xff0c;随着每次的重复&#xff0c;逐渐增加速度&#xff0c;直到完全达到正确的速度。 回想学习英语…