Vue (3)-CSDN博客

本文链接：https://blog.csdn.net/2301_77293343/article/details/132522642

生命周期

1.生命周期 & 生命周期四个阶段

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

2.生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate() {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created() {
        console.log('created 响应式数据准备好之后', this.count)
      },
      // 2. 挂载阶段（渲染模板）
      beforeMount() {
        console.log('beforeMount 模版渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted() {
        console.log('mounted 模版渲染之后', document.querySelector('h3').innerHTML)

      },
      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate() {
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated() {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },
      // 4. 卸载阶段
      beforeDestroy() {
        console.log('beforeDestroy,卸载前')
      },
      destroyed() {
        console.log('destroyed,卸载后')
      }
    })
  </script>
</body>

工程化开发入门

1.工程化开发和脚手架Vue CLI

开发 Vue 的两种方式:

1. 核心包传统开发模式:基于 html / css / js 文件，直接引入核心包，开发 Vue。

2. 工程化开发模式:基于构建工具(例如:webpack ) 的环境中开发 Vue。

基本介绍:

Vue CLI 是 Vue 官方提供的一个全局命令工具。
可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

使用步骤:

1. 全局安装 (一次) :yarn global add @vue/cli 或 npm i @vue/cli -g
2. 查看 Vue 版本:vue --version
3. 创建项目架子:vue create project-name(项目名-不能用中文)
4. 启动项目: yarn serve 或 npm run serve(找package.json)

2.脚手架目录文件介绍 & 项目运行流程

项目运行流程

3.组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

好处：便于维护，利于复用 → 提升开发效率。

组件分类：普通组件、根组件。

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

根组件：整个应用最上层的组件，包裹所有普通小组件。

App.vue 文件(单文件组件)的三个组成部分：

三部分构成
- template：结构（有且只能一个根元素）
- script: js逻辑
- style：样式 (可支持less，需要装包)
让组件支持less

（1） style标签，lang="less" 开启less功能

（2）装包: yarn add less less-loader -D 或者npm i less less-loader -D