Vue.js基础简答题

系列文章目录

后续补充

---

---

前言

Vue.js基础简答题。

---

一、库与框架的区别是什么？

当使用库时，程序员负责应用程序的流程，选择何时何地调用库。当使用框架时，框架负责流程。此时框架提供了一些插入代码的地方，但是它会根据需要去使用你插入的代码。框架的使用需要遵守规则，自由度比起库来要差。

二、Vue.js 的核心特性有哪些？

• 数据驱动视图。
• 组件化开发。

三、什么是数据驱动视图？

data中的数据声明以后，将数据绑定到视图，数据变化会自动更新到视图中对应元素之中，无需手动操作DOM，达到数据驱动视图的效果。

四、MVVM 模型各部分含义是什么，在 Vue.js 中分别对应哪些功能？

• M-Model，代表数据。 对应页面上要显示数据。
• V-View，视图模板。 对应DOM结构。
• VM-ViewModel，视图模型，用来和View层进行双向数据绑定,对应Vue实例。

五、el 选项的作用是什么，可以设置哪几种值？

选取一个DOM元素作为实例的挂载点，划定vue.js作用的范围。可以设置为原生javascript获取的元素/css选择器。

六、 设置在 data 中的数据有什么特点？

data中的数据为响应式数据，发生改变时，会自动更新到视图上。可以在插值表达式中直接使用,可以用于设置HTML元素属性和内容，单向数据绑定和双向数据绑定。

七、Vue.set() 可以解决什么问题？

data中存在数组时，索引操作和length操作对于数组的改变不会自动更新到视图上。而Vue.set()方法更新数组中的数据，可以自动更新到视图上。Vue.set(要改变的数组名，索引值，‘生效的内容’)

八、插值表达式内有哪些书写要求？

插值表达式只能写在标签内容区域，不能写在标签上。内部可以写javascript的表达式，但不能书写javascript语句。元素内容可写成组合形式或者结合数据绑定操作，为元素进行动态内容设置。

九、methods 的作用是什么？

存储Vue实例要使用的函数。

十、谈谈你对指令的理解。

指令是HTML的自定义属性，把指令设置给HTML元素以后，框架可以识别出特定的自定义属性，然后快速进行功能处理，简化DOM操作，相当于对基础DOM操作进行封装。当指令的表达式改变时，会进行相应的DOM操作。

十一、常用的内容处理指令有哪些？

• v-text：元素内容整体替换为指定纯文本数据。
• v-html：元素内容整体替换为指定HTML文本。
• v-once：使元素内部的插值表达式只生效一次，为静态数据，不会动态更新。

十二、常用的属性绑定操作有哪些？

用于动态绑定HTML属性,例如id，class，style。绑定纯数据、设置表达式、绑定多个属性，还可以绑定对象。

十三、v-for 指令的注意点？

v-for一般不与v-if一起在一个标签上使用。使用v-for的同时，应始终指定唯一的Key值，提高渲染性能并避免问题。通过v-for与< template>模板占位符结合使用，将某一个指令内容区域进行循环创建，不能设置key属性。

十四、v-if 与 v-show 的区别？

• v-show是通过改变元素的display属性改变元素的显示与隐藏。v-if适用于频繁切换显示与隐藏。
• v-if是通过是否创建DOM元素来改变元素的显示与隐藏。

十五、如何绑定事件？

v-on绑定事件，可以缩写成@。

十六、谈谈你对双向数据绑定的理解？

双向数据绑定是在单向数据绑定的基础上，可自动将元素输入的内容更新给数据，实现数据与元素内容的双向数据绑定。双向数据绑定的主体是View和ModelView。View代表视图元素，ModelView代表Vue实例。Vue实例中的data中的数据改变时会自动更新到视图上，这叫做单向数据绑定。在单向数据绑定的基础上，改变视图中元素的数据时会自动更新到data中的数据上，这叫双向数据绑定。

十七、如何设置自定义指令？

• 全局注册，所有Vue实例和组件均可使用

Vue.directive("自定义指令的名字",{
    inserted：function(el){	// 钩子函数
        el.focus() 		//代码操作
    }
});

• 局部注册，只有当前Vue实例或组件内可以使用

directives: {
  自定义指令的名字: {
    // 指令的定义
    inserted: function (el) { // 钩子函数
      el.focus()		// 代码操作
    }
  }
}

十八、过滤器通常用来做什么？

对文本内容进行格式化。

十九、methods 与 computed 有哪些区别？

computed	methods
通过属性名访问	函数调用
基于缓存依赖，只有计算属性所依赖的数据发生改变时，它才会重新取值	每次渲染元素时，若有函数调用，则每次都会被调用
遍历数据和复杂数据计算时常用计算属性

二十、如何设置侦听器？

new Vue({
    el:"#app",
    data:{
        value:'',
        obj:{
            content1:'内容1',
            content2:'内容2'
        },
     watch:{
         value(newValue,oldValue){
             // 逻辑代码
         }
         obj:{
         	deep:true;
         	handler(val,oldVal){
        
    		}
     	}
     }
    }
});

---

总结

Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。

Vue.js的特点包括：

渐进式框架：Vue.js不需要在项目中引入大量的库或插件，就可以快速构建出漂亮的用户界面。
易于学习和使用：Vue.js的API设计得非常简单易懂，学习成本低。
灵活性：Vue.js可以与其他库或插件无缝集成，也可以自底向上逐层封装。
高效性：Vue.js采用虚拟DOM技术，可以快速响应数据变化。