草庐IT

vue灵魂拷问

xsmile21 2023-09-30 原文

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和用随机数都是同理，随机数每次都在变，做不到专一性，也很消耗性能

拷问vueli显隐销毁

有关vue灵魂拷问的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  2. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  3. vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2

    平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  4. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：

  5. Vue3的新特性 - 2

    Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工

  6. vue2+element-ui,el-aside侧边栏容器收缩与展开 - 2

    一、概览实现效果如下：二、项目环境1、nodejs版本node-vv16.16.02、npm版本npm-vnpmWARNconfigglobal`--global`,`--local`aredeprecated.Use`--location=global`instead.8.15.03、vue脚手架版本vue-V@vue/cli5.0.8三、创建vue项目1、创建名为vuetest的项目vuecreatevuetest选择Default（[Vue2]babel,eslint）  2、切换到项目目录，启动项目cdvuetestnpmrunserve 3、使用浏览器预览 http://localh

  7. Vue学习笔记：Vue element-ui中table组件的使用----接入后端数据 - 2

    记个笔记以免遗忘，建议还是查看Element-UI提供的官方文档学习，自己摸索比较难受官方文档：Element-UI组件TableElement-UI官网提供了许多Table格式，这里以一个带有筛选器的表格为例表格的官网显示效果：直接将官方提供的示例代码贴入.vue文件中即可使用显示的数据是通过data()方法提供的假数据。方法见下：data(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1

  8. ruoyi-vue 新建模块--若依前后端分离系统代码生成。 - 2

    目录：1.在数据库中创建表2.使用代码生成功能，生成基础代码2.1修改代码生成器中配置文件generator.yml2.2使用系统工具代码生成3.新建子模块，迁移代码3.1创建grayskyax-assetsmanagement模块3.2在RuoYi整个项目下的`pom.xml`中引入刚刚新建的模块：3.3在ruoyi-admin模块的pom.xml中引入新建的模块3.4在新建的assetsManagement模块中引入ruoyi-common模块3.5将之前解压后的文件放如项目的对应目录下;3.6在数据库中执行生成的sql脚本3.7配置扫描路径application.yml,applicat

  9. 项目部署——Vue项目部署到云服务器(linux) - 2

    因为期末了，要检查web大作业，虽然没有要求，但我想把项目部署一下，以免每次都要打开运行了，部署过踩了许多坑，这里总结一一下这次部署的流程吧。项目我个人进行前后端分离的全栈开发，有后台，后台部署的过程由于篇幅原因将在下一篇中讲解准备工作准备一台虚拟机或者云服务器（linux系统）首先，由于真实的项目基本上都部署在linux系统上，因此为了贴近真实，我们需要准备一台带有linux系统的虚拟机或者云服务器，由于虚拟机不能在自己的电脑关机了以后继续运行，因此这里推荐云服务器，目前用过阿里云，腾讯云两款云服务器部署项目,操作基本上都十分简单。新用户可以在腾讯云和阿里云平台都有两周的免费云服务器可以领取

  10. javascript - vue.js中v-show的回调 - 2

    有没有使用vue.js的on-shown和on-show的回调方法？我在div元素上使用v-show="my-condition"。但里面有一些charts.js图表，除非可见，否则无法呈现。任何人都知道如何仅在父级可见时才渲染chart.js？它们位于可选择的选项卡内，因此它可能会触发多次。我正在使用Vue.js和vue-strap。 最佳答案 查看thisanswer-在类似情况下，使用nextTick()对我有用。简而言之:newVue({...data:{myCondition:false},watch:{myConditi

随机推荐