Vue问题答疑

v-if和v-for的区别
v-if和v-for为什么不能一起使用?
Vue组件之间的通讯
Vue组件中的data属性为什么必须用函数形式
谈谈Vue的生命周期,create和mouted的区别,第一次页面加载用到哪几个周期函数
destroyed一般在什么场景使用?
谈谈v-for中key的作用
vue的slot理解和用法
vue.js两个核心是什么?
vue和JQ有哪些不同,他们有什么优点
MVVM的理解
说一下keep-alive的原理
vuex的理解和使用场景
vue中使用v-html会导致哪些问题
简单说说vue的渲染过程
异步请求适合在哪个生命周期调用
为什么Vue采用异步渲染

1. v-if和v-for的区别?

v-if
- 用于判断条件是否满足,并渲染到DOM上
v-for
- 用于HTML的循环渲染

2. v-if和v-for为什么不能一起使用?

原因: v-for的优先级要高于v-if,如果在同一个元素上同时使用两个指令会导致被循环出来的每个元素都会带有一个v-if指令从而造成资源浪费解决方法: 在循环元素外层嵌套一个template标签或者div来做v-if的判断

3.Vue组件之间的通讯

Vue可通过porps属性进行父子组件之间通讯,实例如下

父组件,暂时起名为parent.vue

    <template>
        <Child :number="num"/>
    </template>
    <script>
        import Child form "./child.vue"
        export default{
            conponents:{
                Child
            }
            data(){
                return{
                    num:1000
                }
            }
        }
    </script>

子组件,暂时命名为child.vue

    <template>
        <div>{{number}}</div>
    </template>
    <script>
        export default{
            porps:[number]
        }
    </script>

子父组件通信使用$emit

代码如下,父组件命名为parent.vue

    <template>
        <div>
            <Child @onNum="res"/>
        </div>
    <template>
    <script>
        import Child from "./child.vue"
        export default{
            data(){
                return{}
            },
            methods:{
                res(data){
                    console.log("data") //100
                }
            }
        }
    </script>

子组件暂时命名为child.vue

    <template>
        <div>
            <button @click="test()">给父亲传值</button>
        </div>
    </template>
    <script>
        export defalut{
            data(){
                return{}
            },
            methods:{
                test(){
                    this.$emit("onNum","100")
                }
            }
        }
    </script>

兄弟组件传值使用EventBus事件总线通讯

代码如下,在app.vue中创建一个Vue实例

    var bus = new Vue()
    bus.$on() //绑定事件
    bus.$emit() //发送事件

第一个组件命名为componetn1.vue,用于接收信息

    <template>
        <div>
            
        </div>
    </template>
    <script>
        export default{
            data(){
                return{}
            },
            mounted(){
                //初始化时监听resFun事件
                bus.$on("resFun",(data){
                    console.log(data)
                })
            }
        }
    </script>

第二个组件命名为componetn2.vue,用于发送信息

    <template>
        <div>
            <button @click="test">提交</button>
        </div>
    </template>
    <script>
        export default {
            data(){
                return{
                    num:"1000"
                }
            },
            methods:{
                test(){
                    bus.$emit("resFun",{
                        num:this.num
                    })
                }
            }
        }
    </script>

最终解决方法:使用Vuex数据管理仓库

4. Vue组件中的data属性为什么必须用函数形式

个人理解如果组件中data的属性对象的话,如果多次重复使用这个组件,其里面的data引用的是同一个对象的地址,如果一个地方改变了这个data的值,其他地方的data也将同时被改变. 如果是使用函数式在多次使用这个组件时js会创建独立的作用域,保证自己组件实例的属性不会被相互影响.

5. 谈谈Vue的生命周期,create和mouted的区别,第一次页面加载用到哪几个周期函数

create :他会在Vue在渲染HTML模板前触发
mouted :会在html渲染后触发
第一次页面加载会触发beforeCreate, created, beforeMount, mounted四个生命周期函数

6. destroyed一般在什么场景使用?

个人理解destriyed组件销毁监听,一般用在v-if中或者页面跳转前进行的一些操作.

7. 谈谈v-for中key的作用?

个人理解 v-for指令中key的只要是为了提升v-for的渲染速度防止数据混乱,之所以key的值需要唯一性,是因为vue根据key值判断该条渲染项是否是原有的元素和数据,如果是将不会重新创建新元素,如果不是就创建此条数据的新元素并渲染到页面上

8. vue的slot理解和用法

slot(槽口)个人理解slot提供插槽概念,以笔记本电脑举例,笔记本本身(子组件中)会提供多个USB接口(slot),来连接外置设备如U盘,鼠标等硬件;同理在Vue中如果父组件给子组件指定的HTML位置上,传一些东西就需要把子组件的某些位置设置为slot. 代码示例如下,父组件命名为parent.vue

    <template>
        <div>
            <Child>
                <h1>hello world</h1>
            </Child>
        </div>
    </tempalte>
    <script>
        import Child from "./child.vue"
        export default {
            components:{
                Child
            }
        }
    </script>

子组件命名为child.vue

    <template>
        <div>
            <div>这是我自己的内容</div>
            <slot name="text"></slot>
        </div>
    </template>
    <script>
        export default{
            data(){
                return {}
            }    
        }
    </script>

9. vue.js两个核心是什么?

数据驱动(双向数据绑定又称为数据响应式)
组件系统(template)Vue独创 vue中每一个.vue文件就是一个组件,可以重复引用

11. MVVM的理解

M: Model数据模型 - 用于处理数据
V: View视图负责页面相关
VM: ViewModel 与界面对应Model 用于把Model对象封装成可以显示和接受输入的界面数据对象

12. 说一下keep-alive的原理

keep-alive是什么

知识盲区有待查证

13. vuex的理解和使用场景

Vuex是Vue提供的数据管理仓库,每个Vue组件过可以访问并改变其指定属性的变化,并把当前状态更新到每个组件上. 使用场景,当多个组件需要监听获取和修改同一个参数时,比如电商平台的登录页,各个组件功能需要监听用户登录的状态开对其开放各个功能,就可以吧用户登录状态储存到vuex中,一旦发现用户退出页面马上跳转到登录页.

14.vue中使用v-html会导致哪些问题

可能会导致css攻击
v-html渲染时不会编辑到vue模板中，因此无法使用html的插值表达式来一些其他的操作
scoprd中的class不会作用在v-html中
v-html只会渲染后台返回的html\css和图片

15. 简单说说vue的渲染过程

知识盲区有待查阅

16. 异步请求适合在哪个生命周期调用

如果在不操作dom的情况下推荐在created函数中进行异步请求,优势是因为请求时间比较早,页面loading时间相对较短; 如果需要操作DOM的需要在页面渲染完成mounted阶段发起异步请求;

17.为什么Vue采用异步渲染

个人理解为了提高页面性能,如果不采用异步更新.每次更新数据都会对当前组件进行渲染.

Vue面试题总结