最是人间留不住，朱颜辞镜花辞树。

Vue3不同于Vue2，在 Vue3的setup中我们是无法访问到this的，所以我们需要借助一个方法，那就是。vue到3.0之后好像取消了bus全局事件总线，选择使用mitt作为兄弟组件间通信和传参的方式。我的理解是：在多级嵌套的组件体系中，某一级的外层组件可以通过。组件提供用户的位置。下面的例子是官网文档中的使用方法。emit是最常见的用于子组件向父组件传递消息的方法。语法糖的写法，其组件是默认关闭的，也就是说如果是通过。来访问子组件中定义的值是拿不到的，必须通过。有三个组件，分别是爷爷，爸爸，孙子。

是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制，是浏览器的行为。原文链接：https://blog.youkuaiyun.com/qq_37656005/article/details/129056780。在打包后，部署后tomcat下，还是会跨域，所以想要彻底解决问题，还是需要后端接口代码加上跨域的相关配置。在本地想请求后端的 一个接口 “http://xxx/test”，proxy配置如下。特别是前后端分离的模式下，由于前后端域名不一致，就会出现跨域问题。// http 是协议。

用代码逻辑来控制下拉框的展开与收起。

当页面操作改变了arr时(不重新赋值, 使用push, splice等方法改变数组), 可以正常出发watch函数, 但是你会发现now和old输出的值是一样的, 这个还可以接收, 至少能触发watch函数, 但是你一旦重新给arr赋值了, 比如给arr数组清空了 test.arr = [];如果是对象的话使用下面的写法,但是比较遗憾, 这里的now和old都是一样的值(改变单一属性的情况下)在vue3中使用watch的时候需要注意的事项很多, 其中需要一项需要注意的是在监听数组的时候。

vue-infinite-scroll的vue3版本,所有用法和一致。其代码也是基于它做了简单修改，并修复了一些bug，比如重复两次请求等问题。API参数 说明 类型 默认值。

（4）使用浏览器访问“http://localhost:5173”无法打开页面，提示“无法访问此网站localhost 拒绝了我们的连接请求。根据“Network: use --host to expose”提示，要求服务使用 host 来进行暴露，即要将服务暴露成“IP + 端口号”进行访问。（1）首先修改 package.json 文件，将启动项中的 dev 和 serve 增加 --host 参数。（3）上述命令执行后，控制台显示“Network: use --host to expose”

【代码】vue3文件下载功能。

有两个页面A和B，我们使用单页面的形式，使用vue-router来实现页面的“跳转”，当我们一开始打开A页面时，执行了页面的created和mounted，跳转到B页面，执行了B页面的created和mounted，但是，当我们从B页面“跳转”回A页面时，我们发现不会执行created和mounted了，因为这个Vue组件已经加载了，它不会重复执行方法，如果我们要在路由发生变化的时候执行方法，那我们就需要监听$route的变化，在它变化的时候执行方法。

vue3对象通常是ref或者reactive响应式对象，不能直接进行对比两个对象是否一致，可以转化为字符串后在对比。

链接：https://juejin.cn/post/7096744577071054879。商业转载请联系作者获得授权，非商业转载请注明出处。使用（provide/inject）刷新页面交互体验比较好。

注意：这个组件想显示出来，必须放到产生滚动效果的元素内部，且是放到最上面！所以必须明确是哪个元素有的滚动条（也许不是body元素）（假如这里是有个类名叫content-view的元素产生的滚动）注意：利用api回到顶部是没有滚动动画的，直接一下就到了。回到顶部组件（点击按钮缓慢回顶部）

原因是父组件异步操作获取数据是在传给子组件值之前，解决方法就是把这个异步数据用ref定义，不用reactive定义。（若父组件用reactive定义时，我在子组件watch监听props无效）父组件调用接口获得数据，并传给子组件。但是子组件并没有得到父组件调接口后的最新数据，而是初始数据。这下子组件不需要监听，得到的值直接是最新的（实在不行还是可以用watch监听一下）

原文链接：https://blog.youkuaiyun.com/weixin_54218079/article/details/124613463。版权声明：本文为优快云博主「我先润了」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。颜色可以自己自由更换。

【代码】VueUse库 使用以及函数名翻译。

getCurrentInstance代表上下文，即当前实例。ctx相当于Vue2的this, 但是需要特别注意的是ctx代替this只适用于开发阶段，如果将项目打包放到生产服务器上运行，就会出错，ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx，代码参考如下。

都是 :deep(选择器){ 样式 } 这样的格式。都比较简单，直接上代码。

在vue2中，我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量，然后通过this.$xxx来获取全局变量。但是在vue3中，这种方法显然不行了。因为vue3中在setup里面我们是无法获取到this的，因此按照官方文档我们使用下面方法来定义全局变量：首先在main.js里写一个我们要定义的全局变量，比如一个系统id吧现在在页面里需要使用这个变量，只需要从vue中引入getCurrentInstance即可，注意不能在页面中使用this.这里 getCurre

只能在当前组件使用的指令成为局部自定义指令。

onRenderTracked直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。Vue3的setup语法糖直接代替beforeCreate，Created；Destroy更名为Unmount；onRenderTriggered直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息。

呵呵

方法用来定义异步组件，它接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。有需要的时候再加载某组件，避免所有组件共同加载要等待的时间太长，用户体验差.使用异步组件可以优化性能。组件来使用，但是该组件还处于试用阶段没有特别稳定，官方不推荐上线项目使用对于异步组件的显示，可以搭配。

例如组件使用频率非常高，几乎每个页面都在使用便可以封装成全局组件。

vue2响应式：核心代码是使用Object.defineProperty()来劫持对象中每一个属性的set和get方法。先来说说Object.defineProperty，称之为对象的属性描述符，可以设置对象的属性是否可以删除（Configurable）、是否可以枚举（Enumerable）、是否可以修改（Writable）、返回值（value）、set（重要，修改触发的回调函数）、get（重要，获取触发的回调函数）