20201020赵鑫

什么是MVC

MVC是Model-View-Controller的简写,可以理解为模型-视图-控制器。M代表数据,V代表视图,可以简单的理解为页面。C即Controll指的是页面业务逻辑,使用MVC的目的是将模型和视图的代码分离。数据和视图必须通过控制器来承上启下。

MVC和MVVM的区别

MVC中的控制器演变成了viewModel,这样解决了mvc中大量的DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验的问题。

v-for为什么一定要加key

如果不加key,那么v-for生成的多个元素之间除了内容之外没有任何区别,如果数组中的某个元素需要更新,就必须得将整个v-for重新执行一遍,效率很低,而如果给每个生成的元素都添加Key,当一个元素发生改变时,vue只需要根据Key来找到这个元素,对其进行操作即可,大大调高了效率。

为什么避免v-if和v-for用在一起

当Vue处理指令时,v-for比v-if有更高的优先级,这样每次v-for都要运行一次v-if,通过v-if移动到当前 元素的父元素,就只需要检查一次,不会每次都运行v-if。

虚拟DOM树

当页面渲染的时候Vue会创建一颗虚拟DOM树,然后当页面发生改变的时候Vue会再创建一颗新的虚拟DOM树,将两个虚拟DOM树进行对比,去记录差有异的地方,将有差异的地方更新到真实的DOM树中。Vue中的虚拟DOM树只会重新渲染页面修改的地方,大大减少了真实DOM树的操作,提高了性能。

VNode

vue在页面上渲染的节点及其子节点。

Vue适用的场景

1.对浏览器的兼容要求不高,vue只支持ie9+

2.对mvvm有一定的经验

3.对加载速度的要求高

4.对性能的要求比较高

5.需要组件化开发

6.喜欢对原生js对象操作

7.SPA

Vue和Jquery的区别

Vue是数据驱动,通过数据来显示图层而不是节点操作

Jquery是基于事件驱动的快速简洁的js框架

Vue的优点

1.低耦合,视图可以独立于数据进行变化的修改,一个viewModel可以绑定到不同的View上,当视图改变的时候数据可以不变,当数据改变的时候视图也可以不变

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

3.独立开发,开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面设计

4.可测试,Vue可以针对ViewModel来测试

keep-alive的作用

可以缓存不活动的组件实例,用于保留组件状态或避免重新渲染

Vue生命周期

1.创建

beforeCreate vue实例化的挂载元素el和数据对象data都undefined,还未初始化。

可以在这里写loading事件,在加载实例时触发

created vue实例数据对象data有了,但是el还没有

可以在这里结束loading事件,异步请求也适合在这里调用

2.载入

beforeMount el和data都已经初始化了,但是挂载之前为虚拟DOM节点,数据还没有替换

mounted vue实例挂载完成,数据成功渲染

挂载元素,获取到DOM节点

3.更新

beforeUpdate data变化时触发

updated

如果对数据进行统一处理,在这里写响应函数。

4.销毁

beforDestroy 执行destory方法后触发。vue实例解除了事件监听和dom绑定。

做一个确认停止事件的确认框

destroyed

vue中利用索引修改数组的时候,页面会跟着同步吗

不会,此时应该利用vue.set方法进行设置数据

路由如何去除url上的

使用history模式,但是需要后台配合

vue中的单向数据流和双向数据绑定是什么意思

单项数据流是指数据是单向的,父组件的数据传递给子组件,只能单项绑定,不可以在子组件修改父组件的数据。

双向数据绑定,是指数据和页面进行双向绑定,相互影响。

组件:

什么是组件

页面中拥有一块专属的html+css+js数据的可重用的页面独立区域。

注意:组件只能拥有唯一父元素

组件化开发:

什么是组件化开发:

一个页面其实是由多个组件聚合而成的一个大型的页面。在代码层面上,一个组件就是一个可反复使用的自定义的标签。当我们拿到一个页面后,都是先将一个页面划分为多个功能区域,然后再由多人分工协作完成每个区域的开发,最后再拼接起来显示。

什么时候使用组件化开发

所有页面,都是由多个组件组合而成的,凡是重用的,必须先定义组件,再来重复使用,开发使用的就是组件化开发。

        //全局组件
        Vue.component("compon-exam",{
            data(){ //data只能是一个方法(函数)
                return{
                    
                }
            },
            //组件中只能有唯一父元素
            template:`
            <div>  
            
            </div>
            `
        })
        //局部组件注册
        var componentLi = {
            data(){
                return{
                    
                }
            },
            template:`
            <div></div>
            `
        }

页面中使用组件

<组件名></组件名>

原理:当new vue扫描页面时,如果发现了不认识的自定义html标签,就会到内存中,vue大家庭中查找自定义的组件,只要找到了同名的组件,先用组件的template内容代替当前自定义标签的位置,为这个区域创建了一个微缩的new vue对象副本,并创建一个当前组件专属的data对象副本,包含专属的变量。所以,此时这个小的组件区域就拥有了专属的html和数据和一个微缩版的new vue组件对象。

html模板写法

1.直接写在template属性中,问题,不符合内容与行为分离原则,不便于编写和维护,同时无法利用html语法提示功能。

2.写在一个单独的template元素中,html5标准中,template默认就不显示,是专门给js准备的,用动态反复加载内容。

        <template id="temp">
            <div>
                
                <!--组件内容-->
            </div> //唯一父元素
        </template>
        Vue.component("templateLi",{
            template:"#temp"
        })

父传子

父组件:用绑定属性的方式传值

子组件:用props接收数据

    //创建父组件
    Vue.component("father",{
        data(){
            return{
                value:["子组件能看到我吗?"]
            }
        },
        template:`
        <div>
            <son @addfather="addfathers"  :title="value"></son>
            <div>父组件</div>
        </div>
        `,
        methods:{
            addfathers(data){
                console.log(data)
            }
        }
    })
    //子组件
    Vue.component("son",{
            props:["title"],
            data(){
                return{
                    fa:"爸爸我看到了"
                }
            },
            template:`
            <div>
            <div>子组件</div>
            <button @click="addfather">传值</button>
            </div>
            `,
            created(){
                console.log(this.title)
            },
            methods:{
                addfather(){
                    this.$emit("addfather",this.fa)
                }
            }
        })

兄弟传值

Vue.component("yye",{
template:`
<div>
<one></one>
<two></two>
</div>
`,
 components:{
    one,two
}
})


var one ={
    template:`
    <div>
        我是一号
        <button @click="addtwo">给二号</button>
    </div>
    `,
    methods:{
        addtwo(){
            bus.$emit("add","123")
        }
    }
}

var two = {
    template: `
    <div>我是二号</div>
    `,
    mounted(){
        bus.$on("add",(data)=>{
            console.log(data)
        })
    }
    }

var bus = new Vue()

标签

评论

this is is footer