简述对vue框架的理解.pdf

vue框架的理解

Vue.js概述

Vue是一套用于构建用户界面的渐进式MVVM框架。那怎么理解渐进式呢？渐进

式含义：强制主张最少。

面试官：聊聊对Vue.js框架的理解

Vue.js包含了声明式渲染、组件化系统、客户端路由、大规模状态管理、构建工

具、数据持久化、跨平台支持等，但在实际开发中，并没有强制要求开发者之后

某一特定功能，而是根据需求逐渐扩展。

Vue.js的核心库只关心视图渲染，且由于渐进式的特性，Vue.js便于与第三方

库或既有项目整合。

组件机制

定义：组件就是对一个功能和样式进行独立的封装，让HTML元素得到扩展，从

而使得代码得到复用，使得开发灵活，更加高效。

与HTML元素一样，Vue.js的组件拥有外部传入的属性（prop）和事件，除此之

外，组件还拥有自己的状态（data）和通过数据和状态计算出来的计算属性

（computed），各个维度组合起来决定组件最终呈现的样子与交互的逻辑。

数据传递

每一个组件之间的作用域是孤立的，这个意味着组件之间的数据不应该出现引用

关系，即使出现了引用关系，也不允许组件操作组件内部以外的其他数据。Vue

中，允许向组件内部传递prop数据，组件内部需要显性地声明该prop字段，如

下声明一个child组件：

!--child.vue--

template

div{{msg}}/div

/template

script

exportdefault{

props:{

msg:{

type:String,

default:helloworld//当default为引用类型时，需要使用

function形式返回

}

}

}

/script

父组件向该组件传递数据：

!--parent.vue--

template

script

importchildfrom./child;

exportdefault{

components:{

child

},

data(){

return{

parentMsg:somewords

}

}

}

/script

事件传递

Vue内部实现了一个事件总线系统，即EventBus。在Vue中可以使用EventBus

来作为沟通桥梁的概念，每一个Vue的组件实例都继承了EventBus，都可以接

受事件$on和发送事件$emit。

如上面一个例子，child.vue组件想修改parent.vue组件的parentMsg数据，

怎么办呢？为了保证数据流的可追溯性，直接修改组件内prop的msg字段是

不提倡的，且例子中为非引用类型String，直接修改也修改不了，这个时候需

要将修改parentMsg的事件传递给child.vue，让child.vue来触发修改

parentMsg的事件。如：

!--child.vue--

template

div{{msg}}/div

/template

script

exportdefault{

props:{

msg:{

type:String,

default:helloworld

}

},

methods:{

changeMsg(newMsg){

this.$emit(updateMsg,newMsg);

}

}

}

/script

!--parent.vue--

template

/template

script

importchildfrom./chi