切换多个模板的组件_vue 用户更换模板功能,web前端CSS全局样式

71 阅读2分钟

Vue 面试题

1.Vue 双向绑定原理 2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程? 3.你是如何理解 Vue 的响应式系统的? 4.虚拟 DOM 实现原理 5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异? 6.Vue 中 key 值的作用? 7.Vue 的生命周期 8.Vue 组件间通信有哪些方式? 9.watch、methods 和 computed 的区别? 10.vue 中怎么重置 data? 11.组件中写 name 选项有什么作用? 12.vue-router 有哪些钩子函数? 13.route 和 router 的区别是什么? 14.说一下 Vue 和 React 的认识,做一个简单的对比 15.Vue 的 nextTick 的原理是什么? 16.Vuex 有哪几种属性? 17.vue 首屏加载优化 18.Vue 3.0 有没有过了解? 19.vue-cli 替我们做了哪些工作?

开源分享:docs.qq.com/doc/DSmRnRG…

A B C
```

我们在components中注册了三个模板,当我们点击当前按钮的时候,就会将模板切换模板,可以说是非常方便了


<script>
        var app = new Vue({
            el: '#app',
            components:{
                comA:{
                    template:`
                        <div>组件A</div>
                    `
                },
                comB:{
                    template:`
                        <div>组件B</div>
                    `
                },
                comC:{
                    template:`
                        <div>组件C</div>
                    `
                }
            },
            data:{
                currentView:'comA'
            },
            methods:{
                handleChangeView:function(component){
                    this.currentView='com'+component;
                }
            }
        });
</script>

你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个**<keep-alive>**元素将其动态组件包裹起来。



### 总结

* 框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。

* 算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯

* 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

* 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!

  **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**

![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f768354b960044b69ef0bd29c6c549db~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771329830&x-signature=sOJrZCo47%2B5DtMWkp%2Bq7wgAjZH0%3D)

喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!