凭vue的key它也可以用于强制替换元素而不是复用元素吗？

来源：蜘蛛抓取(WebSpider) 时间：2022-07-12 05:09 标签： vue循环key的作用

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

  • .delete (捕获“删除”和“退格”键)
  • .exact  允许你控制由精确的系统修饰符组合触发的事件
<!-- 没有任何系统修饰符被按下的时候才触发 --> //将组件挂到root节点里，即只作用在id等于root的div元素里 //vm 代表的就是 vue 应用的根组件 //将组件挂到root节点里，即只作用在id等于root的div元素里 //vm 代表的就是 vue 应用的根组件

在自定义指令的时候，在指定指令名称时，不需要写v-

指令可以在不同生命周期阶段执行 bind(指令被绑定到元素上的时候执行)、inserted(绑定指令的元素被添加到父元素上时执行)...

为了便于使用，我们可以在项目根目录 src 下新建一个 directives 文件夹，在文件夹里新建一个  index.js文件，将全局指令相关的代码写入该文件，再在 main.js 里通过 import 的方式引入即可 

//指令钩子函数 当被绑定的元素插入到 DOM 中时……

//将组件挂到root节点里，即只作用在id等于root的div元素里 //vm 代表的就是 vue 应用的根组件

iii.局部自定义指令

//当元素即将挂在到页面还没挂载时 //当元素从新去更新渲染，还未渲染之前 //当元素从新去更新渲染后

　　模型：组件中的data属性

　　视图：组件中的template

　　　　一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。

　　　　二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信。

使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

　　MVVM其实是MVC的改进版，两者没有很大的区别，只是MVVM实现了双向数据绑定，MVC是单向通信的。

　　mvc是比较早的偏后端开发的模式，而且各做各的事，互不干扰，想做双向绑定就只能dom模拟，但是mvvm是实现了响应式的双向数据绑定的，而且还是基于mvc模式演变出来的，你能做的我也能做，你没实现的我却能实现，所以mvvm模式更受前端市场的欢迎

　　jquery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val()，它还是依赖DOM元素的值。

　　Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

  • 各自都提供了响应式的实现，数据驱动视图
  • 这两个都是用来开发SPA的框架，所以组件化、状态管理、路由这些功具备了
  • 数据绑定：vue实现了数据的双向绑定,react数据流动是单向的
  • 数据和视图更新方式不一样：state对象在react应用中不可变的,需要使用setState方法更新状态；在vue中,state对象不是必须的,数据由data属性在vue对象中管理
  • react没有实现双向数据绑定，只有响应式。如果想要响应式需要自己去书写
  • 虚拟dom实现方式上的不一样：vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,该组件以及以下的所有子组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制。
  • diff算法实现不一样

　　1.父组件向子组件通信：props。在子组件中定义props属性

　　2.子组件向父组件通信：emit。在子组件中使用emit发射事件，然后在父组件中定义方法实现这个事件

　　3.$emit和$on也可以实现任何组件之间的通信。包括父子、兄弟、跨级。不过它得有个中间桥梁来传输数据。这个桥梁一般是个空对象 new Vue()

　　　　ref、children可以实现父组件直接获取子组件的实例，通过实例可以直接使用子组件中的方法活或者属性。两者的不同点：children 是个按子组件位置存放子组件实例，ref 可以通过定义属性直接去获取指定的实例

　　　　parent 相反是提供给子组件访问父组件实例的方法

（1）vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

（2）vuex有哪几种属性？

　　A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data

　　B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

　　A、getters 可以对State进行计算操作，它就是Store的计算属性

　　B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用

　　C、 如果一个状态只在一个组件内使用，是可以不用getters

　　两者都是用来对元素做显示隐藏的

　　v-if 是直接通过销毁和重建dom来实现的。

　　v-show 是通过元素的css属性来通知显示和隐藏的

　　性能上来讲的话 v-show或更高效。如果是要频繁切换的话建议使用 v-show

7、vue 如何让css只在自己的文件上生效

　　<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

　　把需要缓存的组件包裹在这个组件中。主要用于保留组件状态或避免重新渲染。

9、脚手架自定义组件的过程

　　第四步：在template视图view中使用，

10、路由组件的懒加载

　　computed 通过计算结果得到的属性，其本身就是个属性，只是这个属性是经过计算得到的，用法和属性的用法是一模一样的，只是定义的位置不同。

　　watch 做数据监听，只要监听的属性发生变化，定义的方法就会执行

　　计算属性具有缓存机制。如果某个值重复的调用而且没有改变，methods的话会重复的执行使用，计算属性是会把缓存中的数据直接取出来使用。只有计算属性中依赖的属性发生变化的时候，值才会重新计算

13、v-if的使用注意事项

　　2、为同一类的组件做显示隐藏的时候，最好加上 key 属性来做标识，被标识的组件就会重新渲染了

14、vue 生命周期函数相关面试题

　　组件实例从创建到销毁的过程，叫做生命周期。开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期

2、vue生命周期的作用是什么

　　生命周期中有多个函数（钩子函数），这些钩子函数可以让我们在特定的时刻执行特殊的事件，形成更好的逻辑。

3、第一次页面加载会触发的函数

4、DOM 渲染在 哪个周期中就已经完成

5、生命周期函数和使用场景

完成了 data 数据的初始化，el没有
vue实例的$el和data都初始化了，但还是虚拟的dom节点，就是说还没有挂载
配合路由钩子使用，可以在这里发送异步事件请求
数据更新时，做一些处理（此处也可以用watch进行观测）
组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在

15、同级元素为什么要使用key

　　同级相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，高效更新虚拟dom，否则 Vue 为了效率只会替换相同标签内部的内容。

16、后期添加属性的方法

17、vue响应式原理

　　4、Dep 发布订阅者，添加观察者者以及在数据发生改变的时候通知观察者

　　3、Watcher 观察者，对数据进行观察以及保存数据修改需要触发的回调

　　2、Compiler 模板编译器，对HTML模板进行编译，提取其中的变量并转化为数据。

　　这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。

　　对模板进行编译的时候，收集跟变量有关的数据。

　　在使用getter方法时，总会通知wather实例对view层渲染页面。.
　　同样的，在使用setter方法时，总会在变更值的同时，通知wather实例对view层进行更新。

　　vue是结合数据劫持和发布订阅者模式来实现双向数据绑定的,当要读取数据的时候会自动触发方法，并且会被赋值

　　使用了ES6中的proxy对数据进行代理。

　　对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改。

　　而使用返回对象的函数，由于每次返回的都是一个新对（Object的实例），引用地址不同，则不会出现这个问题。

19、vue路由的几种模式

　　hash模式下路径有个 # 号

20、v-if和v-for一起使用的弊端以及解决办法

　　由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。

　　解决方案：在v-for的外层或内层包裹一个元素来使用v-if

21、vue父组件和子组件生命周期的顺序

22、vue中事件修饰符有哪些

　　.stop: 阻止事件冒泡
　　.once: 事件只执行一次
　　.self:将事件绑定在自身身上，相当于阻止事件冒泡

23、vue中如何解决页面不重新渲染问题

　　this(Vue).$forceUpdate() 这个方法可以迫使Vue 实例重新渲染。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

24、vue-router有哪些导航钩子（导航守卫）？

　　全局前置守卫：可以一次定义多个守卫，当一个导航触发时，全局前置守卫按照创建顺序执行。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

next: Function: 必须手动调用一下这个函数，不然路由不能解析没法进行跳转

　　全局解析守卫：router.beforeResolve 注册一个全局解析守卫。在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

　　全局后置守卫：这个守卫没有 next 方法

　　路由独享守卫：beforeEnter直接定义在路由里面去

　　　　路由组件内直接定义以下路由导航守卫：（直接定义在组件内部，定义在跟data同级）　

// 在渲染该组件的对应路由被 confirm 前调用 // 因为当守卫执行前，组件实例还没被创建 // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 导航离开该组件的对应路由时调用

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

　　完整的导航调用顺序：

　　动态路由使用 path 传参。动态路由path参数变化的时候，组件不会重新渲染而是会复用，所以生命周期函数不会再次执行，不过可以使用 watch 进行监听

　　参数不会显示在路径上

　　浏览器强制刷新参数会被清空

　　参数会显示在路径上，刷新不会被清空

  • Vue 中操作 data 中数组的方法中哪些可以触发视图更新，哪些不可以，不可以的话有什么解决办法？
  • watch 的属性和 methods 方法能用箭头函数定义吗？
  • 给组件绑定自定义事件无效怎么解决？
  • SPA首屏加载慢如何解决
  • 在使用计算属性的时，函数名和data数据源中的数据可以同名吗？
  • 怎么给vue定义全局的方法？
  • 你怎么理解vue中的diff算法？
  • 你对/api，默认情况下，浏览器会带着weibo.com的cookie访问这个网址，如果用户已登录过该网站且网站没有对CSRF攻击进行防御，那么服务器就会认为是用户本人在调用此接口并执行相关操作，致使账号被劫持。

    验证Token：浏览器请求服务器时，服务器返回一个token，每个请求都需要同时带上token和cookie才会被认为是合法请求
    验证Referer：通过验证请求头的Referer来验证来源站点，但请求头很容易伪造

    XSS即Cross Site Scripting（跨站脚本），指的是通过利用网页开发时留下的漏洞，注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。常见的例如在评论区植入JS代码，用户进入评论页时代码被执行，造成页面被植入广告、账号信息被窃取

    存储型：即攻击被存储在服务端，常见的是在评论区插入攻击脚本，如果脚本被储存到服务端，那么所有看见对应评论的用户都会受到攻击。
    反射型：攻击者将脚本混在URL里，服务端接收到URL将恶意代码当做参数取出并拼接在HTML里返回，浏览器解析此HTML后即执行恶意代码
    DOM型：将攻击脚本写在URL中，诱导用户点击该URL，如果URL被解析，那么攻击脚本就会被运行。和前两者的差别主要在于DOM型攻击不经过服务端

    输入检查：对输入内容中的script iframe 等标签进行转义或者过滤
    设置httpOnly：很多XSS攻击目标都是窃取用户cookie伪造身份认证，设置此属性可防止JS获取cookie
    开启CSP，即开启白名单，可阻止白名单以外的资源加载和运行

    防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于阈值，防抖的情况下只会调用一次，而节流会每隔一定时间调用函数。

我要回帖

更多关于 vue循环key的作用 的文章

 

随机推荐