• vue面试相关


    (1)什么是mvvm?
        MVVM是Model-View-ViewModel的缩写。mvvm是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

        在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

        ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

    (2)mvvm和mvc区别?
        mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到View 。

    (3)vue的优点是什么?
        低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

        可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。

        独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。

        可测试。界面素来是比较难于测试的,而现在测试可以针对ViewModel来写。

    (4)请详细说下你对vue生命周期的理解?

        答:总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。

        ①创建前/后: 在beforeCreate阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,el还没有。

        ②载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。

        ③更新前/后:当data变化时,会触发beforeUpdate和updated方法。

        ④销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在

    (5)组件之间的传值?

        ①父组件与子组件传值

    //父组件通过标签上面定义传值
    <template>
        <Main :obj="data"></Main>
    </template>
    <script>
        //引入子组件
        import Main form "./main"
     
        exprot default{
            name:"parent",
            data(){
                return {
                    data:"我要向子组件传递数据"
                }
            },
            //初始化组件
            components:{
                Main
            }
        }
    </script>
     
    //子组件通过props方法接受数据
    <template>
        <div>{{data}}</div>
    </template>
    <script>
        exprot default{
            name:"son",
            //接受父组件传值
            props:["data"]
        }
    </script>

        ②子组件向父组件传递数据

    //子组件通过$emit方法传递参数
    <template>
       <div v-on:click="events"></div>
    </template>
    <script>
        //引入子组件
        import Main form "./main"
        exprot default{
            methods:{
                events:function(){
     
                }
            }
        }
    </script>
     
    <template>
        <div>{{data}}</div>
    </template>
    <script>
        exprot default{
            name:"son",
            //接受父组件传值
            props:["data"]
        }
    </script>

    (6)路由之间跳转?
    声明式(标签跳转) 编程式( js跳转)

    <router-link :to="index"> router.push('index')

    (7)组件的使用和自己创建公用组件?
        第一步:在components目录新建你的组件文件(indexPage.vue),script一定要export default {}

        第二步:在需要用的页面(组件)中导入:import indexPage from '@/components/indexPage.vue'

        第三步:注入到vue的子组件的components属性上面,components:{indexPage}

        第四步:在template视图view中使用,

        注意:问题有indexPage命名,使用的时候则index-page。

    (8)vue如何实现按需加载配合webpack设置?

        webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入,改为const定义的方式进行引入。

        不进行页面按需加载引入方式:import home from '../../common/home.vue'

        进行页面按需加载的引入方式:const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

    (9)组件间的传值通信

         父组件向子组件传值:
           1)子组件在props中创建一个属性,用来接收父组件传过来的值;
           2)在父组件中注册子组件;
           3)在子组件标签中添加子组件props中创建的属性;
           4)把需要传给子组件的值赋给该属性
         子组件向父组件传值:
           1)子组件中需要以某种方式(如点击事件)的方法来触发一个自定义的事件;
           2)将需要传的值作为$emit的第二个参数,该值将作为实参传给响应事件的方法;
           3)在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

    (10)组件之间跳转的方法

        ① 直接修改地址栏中的路由地址

        ② 通过router-link实现跳转:

    <router-link to="/myRegister">注册</router-link>          

        ③ 通过js的编程的方式:       

    jumpToLogin: function () {
         this.$router.push('/myLogin');
    }

    (11)vue的虚拟dom?

        虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

    .

  • 相关阅读:
    一个简单的Python字符串处理文件
    hexo + Github 搭建问题综述
    node scripts/install.js 停顿解决办法
    Mac下安装hexo Error: Cannot find module './build/Release/DTraceProviderBindings 解决
    Python学习札记(三十八) 面向对象编程 Object Oriented Program 9
    Python学习札记(三十七) 面向对象编程 Object Oriented Program 8 @property
    比较两个目录的文件是否相同
    python Polygon模块安装
    ls操作总结
    导入其他python文件或者python文件的函数
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/10682558.html
Copyright © 2020-2023  润新知