vue基本理论知识

vue基本理论知识

vue 是什么?

按照官网的解释:

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

这里就有两个重点,Vue是一套用于构建用户界面的渐进式框架;Vue 被设计为可以自底向上逐层应用;

那么什么是Vue是一套用于构建用户界面的渐进式框架,什么是Vue 被设计为可以自底向上逐层应用呢。这也可以针对面试官经常会问到,你对vue有什么了解之类的问题。

而对于“渐进式”的解释,我在知乎上看到了一个不错的回答,这个答案也被Vue的设计者点了赞。这个回答的角度很好,主要从与React、Angular的比较来阐述的,由于本人没怎么用过另外这两个框架,也就不妄加评述,所以仅把回答进行摘录,以供参考[4]。 在我看来,渐进式代表的含义是:主张最少。 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:

-必须使用它的模块机制、

-必须使用它的依赖注入

-必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)

所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。比如React,它也有一定程度的主张,它的主张主要是函数式编程的理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为它是软性侵入。Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。 渐进式的含义,我的理解是:没有多做职责之外的事。


先到这,后续还有。。。

Vue是一个用于构建用户界面的渐进式JavaScript框架,以下是一些Vue的基础理论知识: ### 核心概念 - **响应式原理**:Vue采用Object.defineProperty()来实现数据劫持,结合发布者 - 订阅者模式,当一个Vue实例创建时,Vue会遍历data选项中的所有属性,使用Object.defineProperty()将这些属性转换为getter/setter。这样,当这些属性的值发生变化时,Vue会自动更新与之绑定的DOM元素。 - **组件化开发**:组件是Vue应用中最核心的概念之一,它允许将一个大型的应用拆分成多个小的、可复用的组件。每个组件都有自己的模板、脚本和样式,通过组件化开发可以提高代码的可维护性和可复用性。例如,一个页面可能包含头部组件、侧边栏组件、内容组件等。 - **虚拟DOM**:虚拟DOM是一种轻量级的JavaScript对象,它是真实DOM的抽象表示。Vue通过虚拟DOM来提高DOM操作的性能。当数据发生变化时,Vue会首先更新虚拟DOM,然后通过对比新旧虚拟DOM的差异,只更新需要更新的真实DOM节点。 ### 实例与选项 - **Vue实例**:每个Vue应用都是通过创建一个新的Vue实例开始的,使用`new Vue()`来创建实例。实例需要一个`el`选项来指定挂载点,以及一个`data`选项来定义数据。例如: ```javascript var vm = new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }) ``` - **选项对象**:除了`el`和`data`,Vue实例还可以接受其他选项,如`methods`用于定义方法,`computed`用于定义计算属性,`watch`用于监听数据的变化等。例如: ```javascript var vm = new Vue({ el: '#app', data: { num1: 1, num2: 2 }, methods: { add: function() { return this.num1 + this.num2; } }, computed: { sum: function() { return this.num1 + this.num2; } }, watch: { num1: function(newVal, oldVal) { console.log('num1 changed from ' + oldVal + ' to ' + newVal); } } }) ``` ### 模板语法 - **插值**:使用双大括号`{{ }}`进行文本插值,用于将数据绑定到DOM元素的文本内容中。例如:`<p>{{ message }}</p>`。 - **指令**:指令是带有`v-`前缀的特殊属性,用于在模板中实现一些特殊的功能。常见的指令有`v-bind`用于绑定HTML属性,`v-on`用于绑定事件监听器,`v-if`用于条件渲染,`v-for`用于列表渲染等。例如: ```html <!-- v-bind示例 --> <a v-bind:href="url">Link</a> <!-- v-on示例 --> <button v-on:click="handleClick">Click me</button> <!-- v-if示例 --> <p v-if="isShow">This is a conditional paragraph.</p> <!-- v-for示例 --> <ul> <li v-for="item in list">{{ item }}</li> </ul> ``` ### 生命周期钩子 Vue实例从创建到销毁的整个过程称为生命周期,在这个过程中,Vue提供了一系列的生命周期钩子函数,允许开发者在特定的阶段执行自定义的代码。常见的生命周期钩子有`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy`、`destroyed`等。例如: ```javascript var vm = new Vue({ beforeCreate: function() { console.log('Before create'); }, created: function() { console.log('Created'); }, beforeMount: function() { console.log('Before mount'); }, mounted: function() { console.log('Mounted'); } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值