2024年Android最新【从零开始学Vue】快速上手开发课设 Vue基础知识【详细】(1)，2024年最新科技协会面试问题

本文链接：https://blog.csdn.net/2401_84545700/article/details/138856021

尾声

最后，我再重复一次，如果你想成为一个优秀的 Android 开发人员，请集中精力，对基础和重要的事情做深度研究。

对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

这里，笔者分享一份从架构哲学的层面来剖析的视频及资料分享给大家梳理了多年的架构经验，筹备近6个月最新录制的，相信这份视频能给你带来不一样的启发、收获。

Android进阶学习资料库

一共十个专题，包括了Android进阶所有学习资料，Android进阶视频，Flutter，java基础，kotlin，NDK模块，计算机网络，数据结构与算法，微信小程序，面试题解析，framework源码！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2. 开发框架比较
- 2.1 React 与 VUE 共同点
- - 2.1.1 数据驱动视图
  - 2.1.2 组件化
  - 2.1.3 Virtual DOM
- 2.2 React 与 Vue不同点
- - 2.2.1 核心思想不同
  - 2.2.2 组件写法差异
  - 2.2.3 响应式原理不同
3. 前备知识
4. Vue基础简介
5.第一个Vue程序
- 5.1 el挂载点
- 5.2 data:数据对象
6. 总结
VScode使用小技巧
- 快速生成开发模板
- Live Server插件

1. 笔者的话

===========================================================================

这学期开设了javaweb技术开发的课程，但是教学课程只涉及三原生语言的学习，所以老师要我们自学一门前端开发框架，并用所学开发一个小项目作为学期期末课设大作业；准备阶段我们也分析了很久面对当前热门的react和vue不知道选哪一个，进行了一段时间的比较分析最终选择学习vue框架，选择目前比较热门的VScode开发神器开发

2. 开发框架比较

=============================================================================

2.1 React 与 VUE 共同点

数据驱动视图

JavaScript 的 UI 框架，专注于创造前端的富应用。

组件化

都使用 Virtual DOM

2.1.1 数据驱动视图

在jquery时代，我们需要频繁的操作DOM（DOM就是文档对象模型）来实现页面效果与交互；而Vue和React 解决了这一痛点，采用数据驱动视图方式，隐藏操作DOM的频繁操作。封装了数据和dom对象操作的映射，我们只需要关心数据的逻辑处理，数据的变化就能够自然的通知页面进行页面的重新渲染。

DOM 是什么？ - 知乎 (zhihu.com)

理解数据驱动视图 - 掘金 (juejin.cn)

2.1.2 组件化

React与Vue都遵循组件化思想，它们把注意力放在UI层，将页面分成一些细块，这些块就是组件，组件之间的组合嵌套就形成最后的网页界面。

所以在开发时都有相同的套路，比如都有父子组件传递，都有数据状态管理、前端路由、插槽等。

2.1.3 Virtual DOM

Vue与React都使用了 Virtual DOM + Diff算法，不管是Vue的Template模板+options api 写法，还是React的Class或者Function写法,最后都是生成render函数，而render函数执行返回VNode(虚拟DOM的数据结构，本质上是棵树)。

2.2 React 与 Vue不同点

Vue和React两者虽然都是用于构建用户界面的框架，但是也有很大的差异，首先二者核心的思想就不同。

2.2.1 核心思想不同

Vue早期开发就尤雨溪大佬，所以定位就是尽可能的降低前端开发的门槛，让更多的人能够更快地上手开发。这就有了vue的主要特点：灵活易用的渐进式框架，进行数据拦截/代理，它对侦测数据的变化更敏感、更精确。

React 从一开始的定位就是提出 UI 开发的新思路。背靠大公司Facebook 的React，从开始起就不缺关注和用户，而且React想要做的是用更好的方式去颠覆前端开发方式。所以React推崇函数式编程（纯组件），数据不可变以及单向数据流,当然需要双向的地方也可以手动实现，比如借助onChange和setState来实现。

2.2.2 组件写法差异

React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js

Vue 推荐的做法是 template 的单文件组件格式(简单易懂，从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue也支持JSX写法)

2.2.3 响应式原理不同

vue依赖收集，自动优化，数据可变。

vue递归监听data的所有属性,直接修改。

当数据改变时，自动找到引用组件重新渲染。

React基于状态机，手动优化，数据不可变，需要setState驱动新的state替换老的state。

当数据改变时，以组件为根目录，默认全部重新渲染,

所以 React 中会需要 shouldComponentUpdate 这个生命周期函数方法来进行控制

3. 前备知识

===========================================================================

html、css、JavaScript、Ajax

HTML基础知识

HTML详解head标签

CSS基础知识

笔者努力学习更新中

4. Vue基础简介

==============================================================================

JavaScript框架

简化Dom操作

响应式数据驱动

官方文档：Vue3：官网https://v3.cn.vuejs.org/)

Vue2官网：https://cn.vuejs.org/v2/guide/

5.第一个Vue程序

=============================================================================

安装vue的当时有多种昂，可以通过URL引用来使用vue框架，也可以将vue.js下载在本地，通过 <script> 标签引入

如下是通过URL引用来安装vue框架


<!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<!DOCTYPE html>

<html lang="en">



<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Vue基础</title>

</head>



<body>

  <div id="app">

    {{ message }}

  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>

    var app = new Vue({

      el:"#app",

      data:{

        message:" Hello World! Vue "

      }

    })

  </script>

</body>



</html>

显示效果