vue.js

最新推荐文章于 2024-10-28 15:18:39 发布

yxz20040218

最新推荐文章于 2024-10-28 15:18:39 发布

阅读量871

点赞数 17

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/yxz20040218/article/details/134878311

版权

本文介绍了Vue.js的简介、优点，学习前的基础要求，包括HTML/CSS/JS等知识，以及如何通过script标签引入和使用Vue。重点讲解了Vue的响应式原理和Vue3对Object.defineProperty的处理，以及VueCLI的作用。

摘要由CSDN通过智能技术生成

1.Vue的介绍

Vue.js致力于构建数据驱动的web应用开发框架，以简洁化，轻量级，数据驱动，模块友好等优势深受企业以及前端开发者的喜爱，成为前端开发人员必备的技能。Vue3.0的出现，又带动周边生态的发展，奠定了vue在企业级开发的重要地位。

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

渐进式框架做分层设计，每层都可选，不同层可以灵活接入其他方案。而当你都想用官方的实现时，会发现也早已准备好，各层之间包括配套工具都能比接入其他方案更便捷地协同工作。一个个放入,放多少就做多少。

2.学习vue之前拥有的基础

熟悉HTML/CSS/JavaScript等前端开发技术；

初步掌握JSON，闭包，AJAX…等JavaScript技术；

事先掌握一些ES6的知识。

3.Vue的使用

Vue官网

(https://cn.vuejs.org/v2/guide/installation.html)

直接下载并用 script标签引入，vue会被注册成一个全局变量。创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

命令行工具vue cli Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。

深入响应式原理 — Vue.js (Vue.js)

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

注意：

vue3 的变化Object.defineProperty有以下缺点。