【Vue核心篇Ⅱ】计算属性、监听器、生命周期、使用脚手架工具创建工程化项目

computed计算属性

计算属性：封装一段求值代码，基于现有数据，计算出一个新的数据。当依赖的数据发生变化时，计算属性会重新计算结果

使用场景：依赖现有数据，计算出一个新数据。如计算商品总价

computed 的完整写法

当计算属性是一个函数时，只能进行读取，不能进行修改

要修改计算属性的值，需要使用计算属性的完整写法，传入一个对象：

读取计算属性时，执行 get 方法中的代码；修改计算属性时，执行 set 方法中的代码
在计算属性的 set 方法中，不要修改计算属性自身，否则会造成死循环！

eg.全选与反选

html 复制代码

<div id="app">
    <div>
        <span>全选:</span>
        <input v-model="isAll" type="checkbox" />
        <button @click="isAll = !isAll">反选</button>
        <!-- 结果列表 -->
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <input v-model="item.checked" type="checkbox" />
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
</div>

js 复制代码

// 全选反选核心：计算属性
// 1.循环渲染列表
// 2.选中所有列表项后，全选  怎么判断都选中？维护一个全选状态 isAll 计算属性，依赖其他所有列表项的选中状态
// 3.点击全选，选中所有列表项  全选按钮使用了 v-model 双向绑定，当选中/取消时，相当于修改 isAll 计算属性的值
// 4.点击反选，直接将 isAll 取反
const app = new Vue({
    el: "#app",
    data: {
        list: [
            {
                name: "猪八戒",
                checked: false,
            },
            {
                name: "孙悟空",
                checked: false,
            },
            {
                name: "唐僧",
                checked: false,
            },
            {
                name: "白龙马",
                checked: false,
            },
        ],
    },
    computed: {
        // 记录全选按钮的状态
        isAll: {
            get() {
                return this.list.every((item) => item.checked === true);
            },
            set(newVal) {
                this.list.forEach((item) => {
                    item.checked = newVal;
                });
            },
        },
    },
});

watch监听器

监听器：监听某个数据的变化，然后执行一些业务逻辑或异步操作

使用场景：在数据变化时，执行一些操作。如更新本地存储

watch的完整写法

当监听器是一个函数时，只能监听简单类型数据的变化

要监听复杂类型数据的变化，需要使用监听器的完整写法，传入一个对象：

eg.购物车案例

js 复制代码

const app = new Vue({
    el: "#app",
    data: {
        // 从本地存储中拿数据
        list: JSON.parse(localStorage.getItem("list")) || []
    },
    // 持续深度监听：当list中数据改变时，更新本地存储
    watch: {
        list: {
            deep: true,
            handler() {
                localStorage.setItem("list", JSON.stringify(this.fruitList));
            },
        },
    },
});

计算属性 vs 监听器

Vue配置选项说明

js 复制代码

{
    el: 挂载点|字符串
    data: 数据|对象|键值对
    methods: 方法|对象|函数
    computed: 计算属性|对象|函数
    watch: 监听器|对象|函数
}

computed 和 watch 的完整写法，就是把函数写法变成对象形式

computed vs methods

js 复制代码

计算属性有缓存，只有依赖数据发生变化时才会重新计算结果
方法每次调用都会执行一次

computed vs watch

bash 复制代码

计算属性适用于对多个数据进行复杂计算得到一个新值的场景，例如购物车的总价
监听器适用于在数据发生变化时执行一个特定的操作的场景，例如侦听数据变化发请求或保存到本地
- 计算属性有缓存，监听器没有缓存
- 计算属性只能进行同步操作，而监听器可以进行异步操作
- 计算属性可以有多个，而监听器只能有一个
- 计算属性可以自定义名称，而监听器的名称必须和要监听的属性名一致

生命周期

为什么要划分生命周期？

在开发时，可以手动干预Vue实例的执行过程

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

生命周期钩子：Vue生命周期过程中，会自动运行一些函数。我们可以在这些函数中对Vue实例的执行过程进行人为干预

生命周期的四个阶段

创建阶段（beforeCreate()/created()）：准备数据
挂载阶段（beforeMount()/mounted()）：渲染模版
更新阶段（beforeUpdate()/updated()）：修改数据
销毁阶段（beforeDestroy()/destroyed()）：销毁 Vue 实例

创建阶段和挂载阶段只在 Vue 实例初始化时执行一次，更新阶段每次数据改变都会执行
拓展：Vue生命周期流程

生命周期钩子的实际使用场景

created()：页面初始化时，请求获取远程数据
mounted()：页面初始化时，需要获取DOM
destroyed()：实例销毁时，清除定时器等

Vue工程化开发

工程化开发：使用第三方构建工具（如 webpack、vite）管理项目

脚手架：一个命令行工具（如 Vue CLI），用来快速创建一个标准配置的工程化项目

使用脚手架快速搭建Vue项目

全局安装 Vue CLI：

bash 复制代码

npm i @vue/cli -g
vue --version

创建一个新项目

bash 复制代码

vue create <project-name>

启动一个服务器，在本地运行项目

bash 复制代码

cd <project-name>
npm run serve

项目目录结构&运行流程

使用脚手架构建的 Vue 项目基本结构如下：

项目的启动流程如下图：

bash 复制代码

- main.js：入口文件，项目从这里启动
- App.vue：项目的根组件，包含页面的所有内容
- public/index.html：页面模版文件，提供了Vue实例挂载的DOM