组件通信的方式有哪几种 vue的key

一世温言

已于 2022-09-20 18:24:22 修改

阅读量389

点赞数

文章标签：前端 vue.js javascript

于 2022-09-14 17:24:21 首次发布

本文链接：https://blog.csdn.net/weixin_42210632/article/details/126854982

版权

侵删 Git merge和rebase分支合并命令的区别 - 掘金

v-for的index作为key什么情况下出错?

    <div id="root">
        <button @click="add">添加一个小王</button><span>     &nbsp;</span> <button @click="remove">删除一个小胡</button>
        <ul>
            <li v-for="(p,index) in persons" :key="index">    
    　　　　　　{{p.name}} <input type="text">
            </li>

        </ul>
    </div>

<script src="https://unpkg.com/vue@next"></script>
<script>
const {h,createApp} = Vue
const App={
    data() {
        return {persons: [
            { id: 001, name: '小卢', age: 18 },
            { id: 002, name: '小刘', age: 19 },
            { id: 003, name: '小胡', age: 20 },
        ]}
    },
    methods: {
        add() {
            const t = { id: 004, name: '小王', age: 40 };
            this.persons.unshift(t)
        },
        remove() {
            const t = { id: 004, name: '小王', age: 40 };
            this.persons.pop()
        }
    }
}
createApp(App).mount('#root')
</script>

1.vue-bus

this.$emit this.$on 适合兄弟组件

2.props 适合父子组件
单向数据流, 父组件像子组件通信
$emit
子组件发送数据给父组件
ref
this.$refs.child.sayHello()

3.provide/inject 适合祖孙组件

4.vueX 适合组件之间频繁通信

5.$parent $children 适合父子组件

6.v-slot

7.attrs/listeners
<child2 v-bind="$attrs" v-on="$listeners"></child2>

8、Router

可以通过动态路由、路由跳转方式进行传值，如this.$router.push({path:'xxx',query:{value:'xxx'}})，在跳转的时候顺便传值，通过this.$route.params.value和this.$route.query.value获取到传过来的参数。该方式有局限性，只能在相互跳转的组件通信取值，且直接在跳转之后的页面进行刷新取不到值，视情况而用。

9、缓存

sessionStorage、localStorage、cookie

多个组件之间的通信除了可以用bus、store之外，还比较一种常用的方式--缓存，在同一个窗口不关闭的情况下，该窗口下的其他组件都可以取到缓存中已经存好的值，利用sessionStorage.setItem(key,value)、localStorage.setItem(key,value)等将值存起来，其他组件可以通过sessionStorage.getItem(key)、localStorage.getItem(key)等方式拿到，多个页面共享缓存数据，刷新页面数据不会销毁，可以用sessionStorage.removeItem(key)、localStorage.removeItem(key)的方式将缓存移除，可用场景还是比较多的。

数据存储方式只有props, data, computed

二. vuex是做什么的

vuex的核心是一个仓库store, 管理着许多状态state.
1.单一状态树.2.响应式3.改变state的唯一方式是提交mutation

Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态(state)
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。——Vuex官方文档
主要包括以下几个模块：
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

什么情况下我应该使用 Vuex？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

三.action和mutation区别

1、流程顺序

“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。

2、角色定位

基于流程顺序，二者扮演不同的角色。

Mutation：专注于修改State，理论上是修改State的唯一途径。

Action：业务代码、异步请求。

3、限制

角色不同，二者有不同的限制。

Mutation：必须同步执行。

Action：可以异步，但不能直接操作State。

四.webpack是怎么打包的?

1.webpack是什么
webpack就是一个模块打包器，根据模块建的关系，构建出一张依赖关系图，最后将所有模块打包成一个或多个js文件
2.Entry

打包入口，告诉webpack从那个文件开始
3.Output
打包出口：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值是 ./dist
4.Mode

打包模式development开发模式production生产模式
5.Loaders加载器
webpack默认只能打包js文件，对于其他类型的文件必须用对应的加载器才能去打包比如
常见loader
Sass-loader
Less-loader
Css-loader
webpack默认只能识别es5代码以及部分es6语法，如果想全部识别打包es6语法，必须借助babel babel-loader进行降级
6.Plugins

排除loaders，其他都是插件做的事情
常见的插件
Html-webpack-plugin
Extract-text-plugin
webpack (常问高薪面试题11道)（20220401）

五.git-rebase 和 merge有什么区别?

rebase会将整个分支移动到另一个分支上，有效地整合了所有分支上的提交,主要的好处是历史记录更加清晰，是在原有提交的基础上将差异内容反映进去，消除了 git merge所需的不必要的合并提交。

merge

通过merge合并分支会新增一个merge commit，然后将两个分支的历史联系起来

其实是一种非破坏性的操作，对现有分支不会以任何方式被更改，但是会导致历史记录相对复杂

rebase

rebase会将整个分支移动到另一个分支上，有效地整合了所有分支上的提交

主要的好处是历史记录更加清晰，是在原有提交的基础上将差异内容反映进去，消除了 git merge所需的不必要的合并提交

补充:

git merge

将当前分支合并到指定分支，命令用法如下：

复制

git merge xxx

git rebase

将当前分支移植到指定分支或指定commit之上，用法如下：

复制

git rebase -i <commit>

常见的参数有--continue，用于解决冲突之后，继续执行rebase

复制

git rebase --continue

六.尤雨溪blibili

.vue文件-compiler-render function-virtual DOM-DOM

render作用: 将template翻译成JS
mount作用:将template应用在div上
patch租用:虚拟DOM裁剪,插入

七.v-model是怎么实现的?

八,vue的key

一、Key是什么？
Key 特殊属性主要用做 Vue 的虚拟 DOM 算法在将新节点列表与旧列表进行比较时识别 VNode 的提示。在没有键的情况下，Vue 使用一种算法来最小化元素移动，并尝试尽可能多地就地修补/重用相同类型的元素。使用键，它将根据键的顺序更改对元素进行重新排序，并且不再存在键的元素将始终被删除/销毁。
key主要用作虚拟dom算法提示, 在比较新旧节点列表时用于识别VNode.

九.JS的数据类型? 以及存储上有什么差别?

基本数据类型: 布尔, number, string, null, undefined, symbol
引用数据类型: function, object, array

存储区别: 基本类型直接在栈中存储值, 引用类型在栈中存储引用地址, 堆中存储值.

十.web常见的攻击方式有哪些?如何防御?

XSS(跨站脚本),跨站请求伪造, SQL注入

跨站脚本:
原理:页面渲染的数据包含能运行的脚本<script>alert('我是黑客')</script>
分类:url参数, 存储脚本, dom脚本
避免:使用setcontext,setAttribute代替innerHTML,document.write(); 使用vue/react框架时不适用v-html功能;DOM的内联时间监听器, 如onclick,onmouseover,eval,settimeout等都能把字符串作为代码运行;

XSS的攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法用户的信息后，攻击者甚至可以假冒合法用户与网站进行交互

CSRF 跨站请求伪造

用户点击图片的时候, 发送www.bbb.com的请求, 并且携带的是aaa.com的cookie, 所以可以访问aaa的服务器, 同时进行了一系列给黑客添加管理员权限、删除核心文档等操作，造成攻击; 攻击难度比脚本攻击难度高、更危险。

说明：

一个典型的CSRF攻击有着如下的流程：

受害者登录a.com，并保留了登录凭证（Cookie）
攻击者引诱受害者访问了b.com
b.com 向 a.com 发送了一个请求：a.com/act=xx。浏览器会默认携带a.com的Cookie
a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求
a.com以受害者的名义执行了act=xx
攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作

csrf可以通过get请求，即通过访问img的页面后，浏览器自动访问目标地址，发送请求

同样，也可以设置一个自动提交的表单发送post请求，如下：

<form action="http://bank.example/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script>

访问该页面后，表单会自动提交，相当于模拟用户完成了一次POST操作

还有一种为使用a标签的，需要用户点击链接才会触发

访问该页面后，表单会自动提交，相当于模拟用户完成了一次POST操作

< a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">
    重磅消息！！
<a/>

规避方式：同源策略；cookie过期时间； token验证；

SQL注入

Sql 注入攻击，是通过将恶意的 Sql查询或添加语句插入到应用的输入参数中，再在后台 Sql服务器上解析执行进行的攻击

预防方式如下：

严格检查输入变量的类型和格式
过滤和转义特殊字符
对访问数据库的Web应用程序采用Web应用防火墙

总结: 跨站脚本, 就是输入一段可以执行的脚本, 获取信息; 请求伪造, 就是假借cookie发起请求,删除信息;SQL注入就是将SQL语句插入到数据库中去;其中跨站脚本是容易的攻击;
其实都是获取cookie信息, 脚本攻击是通过执行script脚本获取身份信息, 而伪造攻击是通过用户点击第三方网站获取cookie信息;

其他:

setInterval(func, delay, arg0, arg0) // 作用:每delay的时间, 执行一次func

const intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');

function myCallback(a, b)
{
 // Your code here
 // Parameters are purely optional.
 console.log(a);
 console.log(b);
}

// 清除方式
clearInterval(intervalID)

contentText和innerHTML的区别:

<div id="box">
        innerHTML和innerText之间的区别
        <span>span标签</span>
</div>
var box = document.getElementById('box');
console.dir(box);

console.log(box.innerText);
console.log(box.innerHTML);

//结果1
innerHTML和innerText之间的区别  span标签
//结果2
innerHTML和innerText之间的区别
<span>span标签</span>

contentText IE9以下不支持

十一.什么是单点登录, 如何实现?

SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统

比如登录淘宝, 用户点击天猫或者支付宝时候, 会自动登录