前端面试准备笔记系列之vue(01)

时间 2021-02-18

标签 javascript css html vue java jquery 编程浏览器架构 app 栏目快乐工作繁體版

原文原文链接

01. 对于MVVM的理解?

Model 表明数据模型
View 视图，表明UI组件，负责将数据模型经过UI展现出来
ViewModel 监听Module改变View，监听数据模型控制视图的行为，处理交互。
在MVVM架构下，View和Model并无直接的连系，而是经过ViewModle进行交互，所以开发者只须要关注业务逻辑，不须要手动控制DOM，不须要关注数据状态的同步问题。
以前的jquery开发是面向dom开发，而MVVM是面向数据编程，DOM操做被简化，通常能减小30%左右的代码量。

02. 概述Vue以及优缺点？

Vue自己并非一个框架，它是结合周边的生态构成了一个灵活的、渐进式框架。
Vue的核心思想：数据驱动、组件化
Vue和React,目前都是用了virtual Dom(虚拟dom)实现快速渲染，都是轻量级，响应式组件，服务端渲染，易于集成路由工具，打包工具以及状态管理，都具备优秀的支持和社区。

虚拟dom：
DOM是文档对象模型，整个html文档就是一个dom。
virtual dom，虚拟dom，就是在js内存中构建一个相似dom的对象，去模拟dom进行数据拼装，进行渲染和解析，最后一次性插入html的dom片断中去。javascript

03. vue等单页面应用及其优缺点

优势：Vue 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（若是要支持SEO，建议经过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可使用浏览器的导航按钮须要自行实现前进、后退

04. Vue实现数据双向绑定的原理

Object.defineProperty()
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅模式的方式，经过Object.defineproperty()来劫持各个属性的setter，getter方法，在数据变更的时候发布消息给订阅者，触发相应的监听回调。把一个普通的JavaScript对象传给Vue实例做为它的data选项时，Vue将遍历它的属性，用Object.defineProperty()将他们转为getter/setter,用户看不到，可是在内容让vue进行追踪，在属性被访问和修改的时候通知变化。css

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

05. vue.js的两个核心是什么？

数据驱动、组件系统html

06. css如何只在当前组件起做用

在style标签中写入scoped便可例如：
原理是在HTML的DOM节点上加一个不重复的属性如：data-v-469af010

07. vue几种经常使用的指令

v-text
v-html
v-show
v-if
v-else-if
v-else
v-for
v-on
v-model
v-bind
v-once：组件和元素只渲染一次，当数据发生变化，也不会从新渲染。

08. v-on 能够绑定多个方法吗？

能够vue

<p @click="one(),two()">点击</p>