关于vue的import的一些说明

最新推荐文章于 2024-04-18 09:14:23 发布
最新推荐文章于 2024-04-18 09:14:23 发布
阅读量4.3k 收藏 2
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nbnxaa/article/details/88656623
版权

在做项目过程中，对vue有一些疑问，即vue的import是对另一个vue的复制还是引用，这个问题关系到两个页面引入同一个vue是否会相互影响，因此个人做了个简单的测试

如在a.vue中的写入getShipList，并在页面激活时调用该方法
在这里插入图片描述
在b.vue中写入getShipList，并在页面激活时调用该方法

在这里插入图片描述
上述两个vue均import test.vue
test.vue相关方法的测试部分如下：
在这里插入图片描述
个人测试思路是首先访问a.vue，由于a.vue传入‘1’，则id会被设置为1，而b.vue将不对id产生任何影响。那么如何进行判断呢？很简单，对b.vue弹出框内容进行观察，如果弹出值是1，则说明import是引用，如果是空值，则说明import是复制

最后按上述思路测试之后：
在这里插入图片描述

于是判断import为复制而不是引用
kanaliya
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习笔记（一）—— 什么时候需要import Vue from 'vue'
Stephy_Yy
12-15 1975
一、当执行 import vue from ‘vue’ 时发生了什么？ 其实在 node.js 中，执行 import 就相当于执行了 require，而 require 被调用，就会用到 require.resolve 这个函数来查找包的路径，而这个函数在 nodejs 中会有一个关于优先级的算法。 import Vue from ‘vue’ 解析为 const Vue = require...
Vue export import 导入导出的多种方式与区别介绍
01-19
在使用vue导出时会有一个default关键字，下面举例说明下在导出时使用export和export default的对应的imort写法的区别 一、部分导出和部分导入 部分导出和部分导入的优势，当资源比较大时建使用部分导出，这样一来...
vue中判断应该import 哪个js或css
做一个有知识的流氓
12-18 1101
如果window.myFlag为false，则动态导入jsFile2.js并执行其默认导出的init方法。因此，在确保安装了相应的loader并配置正确的情况下，你就可以在main.js中动态导入SCSS文件，并根据window对象的属性来决定导入哪个文件。在main.js中，确保在创建Vue实例之前已经完成了SCSS文件的导入。请确保jsFile1.js和jsFile2.js中的默认导出对象具有init方法，并根据需要进行相应的处理。在需要导入SCSS文件的组件中，使用动态导入的方式来导入SCSS文件。
Vue中import篇：模块、JS文件、class类文件、数组对象文件、第三方
最新发布
m0_61369360的博客
04-18 609
const config=[1,2,3,4,5] //一般这种方式的数组引入的都是一个常亮，不会变了，所以const即可。alert(this.x + “的年龄是” +this.y+“岁”);//调用时候，vue中先import进去，然后名称.id即可。//执行代码，注意代码中最后一般都需要return返回值。//执行代码，注意代码中最后一般都需要return返回值。//执行代码，注意代码中最后一般都需要return返回值。//执行代码，注意代码中最后一般都需要return返回值。
vue使用import来引入组件的注意事项
weixin_30267691的博客
11-27 2310
Vue使用import ... from ...来导入组件，库，变量等。而from后的来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的： module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { ...
引入外部文件什么时候用花括号什么时候不用
Hiroshi's
02-10 650
比如validate.js // validate.js // 过滤特殊字符 export function stripscript(s) { var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;—|{}【】 ‘；：”“'。，、？]") var rs = ""; for (var i = 0; i < s.length; i++) { rs = rs + s
vue中常用组件全局引入，用的时候不用每个页面都import
sss286083575的博客
10-10 4281
mian.js中 import global from './components/global.js' global.js import Vue from 'vue'; function changeStr(str) { return str.charAt(0).toUpperCase() + str.slice(1); } //require.context('.', false, /...
按照条件 加载引入的 import 模块
qq_42489210的博客
09-08 1792
干货开始了！好不容易搞出来，记录一下； 方案一：将 import 改成异步加载，这个方案不太好，看你需求吧。 let TIM; if (true) { import("tim-js-sdk").then((something) => { TIM = something; console.log(TIM.TYPES.GRP_MEETING); // 这里打印没问题 }); console.log(TIM.TYPES.GRP_MEETING); // 这里打印 -
Vue时间轴 vue-light-timeline的用法说明
01-18
轻量的vue时间轴组件 install ...import LightTimeline from ‘vue-light-timeline’; Vue.use(LightTimeline); <light items='items'></light> export default { data () { return { items:
vue-cli脚手架的.babelrc文件用法说明
10-14
import { Button, Select } from 'element-ui' Vue.component(Button.name, Button) Vue.component(Select.name, Select) ``` 通过这种方式，只有使用到的 Element UI 组件才会被引入，显著减少了项目的体积，...
vue打印插件使用
11-26
import vueEasyPrint from "vue-easy-print"; import demo from './your path/demo'; // in your vue [removed] export default { components: { vueEasyPrint, demo } } 第三步，加载模板: <vue-easy-print ...
Vue-cli打包后部署到子目录下的路径问题说明
10-14
import Router from 'vue-router'; export default new Router({ mode: 'history', base: '/catalog1/catalog2/', routes: [ { path: '/', name: 'indexContent', component: indexContent } ] }); ``` ...
Vue导入项目成功
小武人生
04-03 3386
新导入Vue项目，要安装json的npm。如果显示success就代表成功
vue 动态引入组件
zwj6612的博客
07-13 1433
vue uniapp 动态组件加载
vue中import引入文件和使用的方式总结
qq_38337245的博客
05-12 613
转：https://www.cnblogs.com/yuNotes/p/12464049.html
Vue条件判断与列表渲染
qq_46149597的博客
11-03 1530
Vue条件判断与列表渲染
vue条件判断
m0_73894967的博客
05-15 310
条件 为false --- 销毁 --- 默认开始 - false 不创建不销毁。v-show:无论表达式值是true或者false,都会进行编译缓存渲染。v-if:局部编译,切换时会重建或销毁组件内部的事件监听和子组件。v-show:编译之后基于css进行显示隐藏,dom始终存在。v-show:控制css中display属性进行显示隐藏。v-if:惰性的,只有表达式为true,进行编译缓存渲染。条件 为true --- 创建。v-show:切换条件较多。3.v-if与v-show的区别。
对于在vue中为什么可以通过import导入一个组件理解
qq_39804990的博客
07-26 851
对于在vue中为什么可以通过import导入一个组件理解
vue--关于import的原理
wlijun_0808的博客
07-01 1462
import，require
vue volar 使用说明
09-07
Vue Volar 是Vue.js团队开发的下一代Vue 3框架的实验性编译器。它是为了提供更高性能和更好的开发者体验而设计的。 首先，Vue Volar 是一个独立的编辑器插件，你需要在编辑器中安装和配置它。然后，你可以在Vue项目中使用`<script setup>`标签来编写Vue组件，它可以大大减少代码的体积和复杂度。 一个主要的特点是，Vue Volar 允许你在不使用`import`语句的情况下直接使用组件。这意味着你可以轻松访问其他Vue文件中的组件，而无需手动导入。 另外，Vue Volar 还支持自动推断类型，提供更好的代码编辑体验。它会根据Vue组件的属性和方法的使用情况，自动推断出它们的类型，并在编辑器中进行提示。 Vue Volar 还支持按需导入和导出组件，这使得你可以只导入你需要的组件，而不是整个文件。这可以提高应用程序的性能，并减少资源的占用。 除此之外，Vue Volar 还包含了一些实用的工具，用于调试和性能优化。你可以使用它们来监视组件的渲染性能，并找出潜在的性能问题。 总之，Vue Volar 是一个实验性的编译器，旨在提供更高性能和更好的开发者体验。虽然它目前还在开发中，但你可以在自己的项目中尝试使用它，并享受它带来的好处。但需要注意的是，由于它是实验性的，可能存在一些不稳定性和兼容性的问题，因此在生产环境中使用时需要谨慎。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值