v-show 和 v-if 的作用和区别,v-bind 和 v-model的作用和区别什么情况下回导致跨域 vue生命周期使用vue中的v-for时为什么要绑定 :key vue 组件通信如何实现

80 阅读 0 评论 53 点赞

我是靠谱客的博主贪玩冬瓜，最近开发中收集的这篇文章主要介绍v-show 和 v-if 的作用和区别,v-bind 和 v-model的作用和区别什么情况下回导致跨域 vue生命周期使用vue中的v-for时为什么要绑定 :key vue 组件通信如何实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

v-show 和 v-if 的作用和区别

v-show和v-if的作用：控制元素的显示与隐藏

      v-show切换元素的didplay属性none隐藏block显示
      用来控制元素显示隐藏初始化会渲染
      适用于频繁切换显示隐藏元素不能在template上使用
      简单基于css的切换

      v-if通过DOM是否存在来控制组件显示隐藏
      初始化不会渲染
      不适用于频繁切换显示隐藏的组件，能在template上使用
      切换过程中合适地销毁和重建

      使用场景不同：
      if 多用于需要判断数据从而整体删除一个标签时
      (不频繁切换显示状态)
      show 多用于通过判断数据来处理标签的显示时
      (频繁切换显示状态)

v-bind 和 v-model的作用和区别

相同点：用来绑定数据到标签中，符合数据驱动视图

v-bind:单向绑定，绑定数据，属性和表达试，缩写为"：" 只负责数据显示的标签

v-model双向绑定，主要用于表单中同时负责数据显示和收集的标签

什么情况下会导致跨域怎么解决

不同源策略时会导致跨域(也就是端口号，域名，协议名不同）

1.jsonp：原理就是利用了script标签src属性外联引入文件不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去；

2.axios在vue.config.js中配置代理服务器

vue 有几个生命周期以及各个生命周期的调用时机

有8个：
beforeCreate创建前 created创建后
befoerMount 载入前 mounted载入后
beforeUpdate更新前 updated更新后
beforeDestroy销毁前 destroyed销毁后

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

• beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。
• created阶段：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有
• beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点
• mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点
• beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
• updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
• beforeDestroy阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
• destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果？

目的：高效的更新虚拟的dome
注意：使用key时一定要用v-bind绑定
v-bind绑定key属性时只能用number（数字）或string（字符串）
使元素唯一，更快速的刷新dom，当数据变化，只会渲染改变的那一条
不加当其中一个数据变化 dom要整体刷新
使用v-for的同时，必须指定唯一Key属性，
可以提高渲染性能并避免问题;