![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
luxiaopengyou
这个作者很懒,什么都没留下…
展开
-
Vue懒加载引入子组件的生命周期
正常在script外引入子组件,生命周期是: 父组件created —— 子组件created —— 子组件mounted —— 父组件mounted <script> import HandleWorkData from '@/components/HandleWorkData.vue' export default { components: { HandleWorkData, }, ... </script> 若通过以下懒加载方式引入子组件,生命周期是:原创 2021-05-12 14:38:14 · 720 阅读 · 0 评论 -
element-vue的dialog可拖拽指令
import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') dialogHeaderEl.style.原创 2021-04-01 15:47:12 · 391 阅读 · 0 评论 -
vue双向绑定
两种写法 1、v-model 本质是修改父组件用v-model绑定的值 父组件 <template> <div> <Test v-model="testData"//自定义组件的v-model是以下代码的语法糖: // :value="testData" // @update:value = (e)=>{testData = e} // 拿到值e后赋值给testData,并绑定给value ></Test原创 2021-03-03 18:47:07 · 226 阅读 · 1 评论 -
vue或reac使用threejs做图形交互的经验总结
背景 如题,vue(或react)使用threejs做图形交互,总结了些技巧分享一下,有兴趣欢迎交流。 为threejs新建class,单例模式使用该类 1、vue或react组件中实例化threejs的class,不储存成响应式数据,减少性能损耗;组件销毁的时候若不再需要用到该实例,则释放threejs实例占用的相关内存之外,将该实例置为null; 2、组件中涉及到与threejs交互,可以直接调用实例的方法(涉及到需要threejs交互后引起其他组件数据的更新,可以调用实例方法时传入回调函数); 3、基原创 2021-01-26 17:00:59 · 895 阅读 · 0 评论 -
vue动态引入组件注意事项
componentList.js文件中 const componentList = { GeneralRobot: () => import("./GeneralRobotOptions.vue") } vue组件中 <template> <component :is="someRobotComponent" :key="key" /> </template> import componentList原创 2021-01-24 22:33:02 · 200 阅读 · 0 评论 -
vue性能优化之变量的使用
vue把data、props、store等数据做成响应式,也就是会对这些响应式数据做深度监听,给每一个object类型的key(包括嵌套object)添加observer(vue3使用proxy)。 所以如果我们不需要数据是响应式的,可以在.vue文件头部直接使用let、const定义变量,例如需要储存大容量的变量用于画图(这样的数据通过接口请求到,往往不会改变),在组件销毁的时候将该这些变量设为null。如此可以降低内存损耗,提高性能。 ...原创 2021-01-21 15:56:28 · 329 阅读 · 0 评论