首页 > 其他分享 >Vue3 从零到全掌握：最详尽的入门指南（近万字超全内容）

Vue3 从零到全掌握：最详尽的入门指南（近万字超全内容）

时间：2024-07-02 10:58:43浏览次数：18  
标签：count Vue 近万字 零到 reactive state vue Vue3 ref

一、Vue脚手架

Vue3官方文档地址：https://v3.cn.vuejs.org/

以前的官方脚手架@vue-cli也可以用，但这里推荐一个更轻快的脚手架Vite

脚手架网址：Vite中文网

方式一：vue-cli脚手架初始化Vue3项目
官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

//    查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
//    安装或者升级你的@vue/cli
npm install -g @vue/cli
//     创建
vue create vue_test
// 启动
cd vue_test
npm run serve

方式二：vite初始化Vue3项目
vite官网：https://vitejs.cn///     创建工程
npm init vite-app <project-name>
//    进入工程目录
cd <project-name>
//     安装依赖
npm install
//    运行
npm run dev

二、生命周期钩子函数

在 Vue 3 中，生命周期钩子函数相比于 Vue 2 有所改变，主要是通过 Composition API 来管理组件的生命周期。以下是 Vue 3 中常用的生命周期钩子函数，包括代码和注释：

<template>
  <div>
    <h2>Vue 3 生命周期钩子函数示例</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  },
  // 组件挂载后调用
  mounted() {
    console.log('Component mounted');
  },
  // 使用 Composition API 注册生命周期钩子
  setup() {
    // 在组件挂载后执行
    onMounted(() => {
      console.log('Component is mounted');
    });

    // 在组件更新后执行
    onUpdated(() => {
      console.log('Component is updated');
    });

    // 在组件销毁前执行
    onUnmounted(() => {
      console.log('Component is about to be unmounted');
    });

    // 返回数据和方法给模板使用
    return {};
  }
};
</script>

<style scoped>
/* 可选：组件私有的样式 */
</style>

生命周期钩子函数解释

  1. Vue 3 的生命周期钩子函数:

    • Vue 3 中使用 Composition API 的函数来管理生命周期，比如 onMounted、onUpdated 和 onUnmounted。

  2. setup 函数:

    • 使用 Composition API 时，组件选项中不再使用 mounted、updated 和 beforeUnmount 等生命周期钩子，而是在 setup 函数中使用函数式 API。
    • setup 函数在组件实例创建时执行，返回需要在模板中使用的数据和方法。

  3. onMounted 钩子:

    • onMounted 在组件被挂载到 DOM 后调用，类似于 Vue 2.x 中的 mounted 钩子。
    • 在 onMounted 函数内部定义的代码将在组件挂载后执行。

  4. onUpdated 钩子:

    • onUpdated 在组件更新后调用，类似于 Vue 2.x 中的 updated 钩子。
    • 在 onUpdated 函数内部定义的代码将在每次组件更新时执行。

  5. onUnmounted 钩子:

    • onUnmounted 在组件即将被销毁前调用，类似于 Vue 2.x 中的 beforeUnmount 钩子。
    • 在 onUnmounted 函数内部定义的代码将在组件销毁前执行清理操作。

通过以上示例和解释，你可以更好地理解 Vue 3 中如何使用 Composition API 来管理组件的生命周期，并在需要的时候执行相应的操作。

三、ref方法的几种使用方式

在 Vue 3 中，ref 是用来创建响应式数据的函数，用于在组件中保存和操作 DOM 元素、计数器等简单数据。以下是几种常见的 ref 使用方式，包括代码和注释：

1. 基本用法

<template>
  <div>
    <h2>Vue 3 ref 基本用法</h2>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 创建一个名为 count 的响应式数据
    const count = ref(0);

    // 定义一个增加 count 的方法
    const increment = () => {
      count.value++;
    };

    // 返回数据和方法给模板使用
    return {
      count,
      increment
    };
  }
};
</script>

<style scoped>
/* 可选：组件私有的样式 */
</style>

注释：

  • ref 函数用来创建一个响应式引用，初始值为 0。
  • count.value 访问和修改 ref 创建的响应式数据。
  • increment 方法增加 count 的值，每次点击按钮时触发。

2. DOM 元素引用

<template>
  <div>
    <h2>Vue 3 ref 获取 DOM 元素</h2>
    <button @click="focusInput">Focus Input</button>
    <input type="text" ref="inputRef" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 创建一个 ref 来引用 input 元素
    const inputRef = ref(null);

    // 在组件挂载后获取到 input 元素的引用
    onMounted(() => {
      console.log(inputRef.value); // 输出 input 元素的 DOM 对象
    });

    // 定义一个方法，用来聚焦 input 元素
    const focusInput = () => {
      inputRef.value.focus();
    };

    // 返回数据和方法给模板使用
    return {
      inputRef,
      focusInput
    };
  }
};
</script>

<style scoped>
/* 可选：组件私有的样式 */
</style>

 

注释：

  • ref 创建的 inputRef 用来引用 <input> 元素。
  • onMounted 钩子函数在组件挂载后调用，此时可以访问 inputRef.value 获取到真实的 DOM 元素。
  • focusInput 方法通过 inputRef.value.focus() 聚焦到 <input> 元素。

3. 对象引用

<template>
  <div>
    <h2>Vue 3 ref 对象引用</h2>
    <p>Name: {{ person.name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 创建一个包含对象的 ref
    const person = ref({ name: 'John' });

    // 定义一个方法，用来修改 person 对象的 name 属性
    const changeName = () => {
      person.value.name = 'Jane';
    };

    // 返回数据和方法给模板使用
    return {
      person,
      changeName
    };
  }
};
</script>

<style scoped>
/* 可选：组件私有的样式 */
</style>

注释：

  • ref 创建的 person 是一个包含对象 { name: 'John' } 的响应式数据。
  • person.value.name 可以访问和修改对象属性。
  • changeName 方法用来改变 person.value.name 的值，从 'John' 变为 'Jane'。

通过这些示例，你可以了解如何在 Vue 3 中使用 ref 函数来管理简单的数据、DOM 元素引用以及对象引用，并且在 Composition API 中的应用方式。

 四、reacttive方法和toRefs方法

在 Vue 3 中，reactive 和 toRefs 是 Composition API 中用来创建和处理响应式数据的两个重要方法。下面我将为你展示它们的用法，并附上详细的注释。

1. reactive 方法

<template>
  <div>
    <h2>Vue 3 reactive 方法</h2>
    <p>Person: {{ person.name }}, Age: {{ person.age }}</p>
    <button @click="updatePerson">Update Person</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    // 使用 reactive 方法创建一个响应式对象
    const person = reactive({
      name: 'John',
      age: 30
    });

    // 定义一个更新 person 对象的方法
    const updatePerson = () => {
      person.name = 'Jane';
      person.age += 1;
    };

    // 返回数据和方法给模板使用
    return {
      person,
      updatePerson
    };
  }
};
</script>

<style scoped>
/* 可选：组件私有的样式 */
</style>

注释：

  • reactive 方法用来创建一个包含响应式数据的对象 person。
  • person.name 和 person.age 可以在模板中直接使用，并且会自动响应数据的变化。
  • updatePerson 方法修改 person 对象的属性，任何改变都会在页面上自动更新。

2. toRefs 方法

<template>
  <div>
    <h2>Vue 3 toRefs 方法</h2>
    <p>Product: {{ product.name }}, Price: {{ product.price }}</p>
    <button @click="updateProduct">Update Product</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    // 使用 reactive 方法创建一个响应式对象
    const product = reactive({
      name: 'Keyboard',
      price: 50
    });

    // 使用 toRefs 将 reactive 对象转换为普通对象的 ref
    const productRefs = toRefs(product);

    // 定义一个更新 product 对象的方法
    const updateProduct = () => {
      product.name = 'Mouse';
      product.price += 10;
    };

    // 返回数据和方法给模板使用
    return {
      ...productRefs, // 解构 productRefs 对象，使其成为响应式数据
      updateProduct
    };
  }
};
</script>

<style scoped>
/* 可选：组件私有的样式 */
</style>

 

注释：

  • reactive 方法创建一个响应式对象 product，包含 name 和 price 属性。
  • toRefs 方法将 reactive 对象转换为普通对象的 ref，这样可以在模板中使用 product.name 和 product.price。
  • updateProduct 方法修改 product 对象的属性，页面会自动更新 name 和 price 的显示。

通过 reactive 和 toRefs 方法，可以有效地管理和操作组件中的响应式数据，从而实现数据的动态更新和页面的重新渲染。

五、setup语法糖

之前写的setup语法糖其实可以简写：

<template>
    <div>
        <p>{{num}}</p>
        <button @click="num++">按钮</button>
    </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs } from "Vue"

let obj = reactive({
    num:9
})

let {num} = toRefs(reactive(obj))
</script>

六、watch属性和watchEffect属性

在Vue 3中，watch和watchEffect都是用来响应式地监视数据变化并执行相应逻辑的功能。它们的使用方式和作用略有不同，下面是它们的代码示例和注释：

import { reactive, watch, watchEffect } from 'vue';

const state = reactive({
  count: 0,
  doubleCount: 0,
});

// 使用watch来监视特定的响应式数据变化
watch(
  () => state.count, // 监视的数据源，可以是一个getter函数
  (newValue, oldValue) => {
    console.log(`count变化了：新值为${newValue}，旧值为${oldValue}`);
    state.doubleCount = newValue * 2; // 更新另一个响应式数据
  }
);

// 使用watchEffect来监视数据变化并执行副作用
watchEffect(() => {
  console.log(`count的值是：${state.count}`);
  // 此处可以写一些副作用逻辑，它会在count变化时自动运行
});

// 模拟数据变化
setTimeout(() => {
  state.count++;
}, 1000);

注释解释：

  1. watch示例：

    • watch接受两个参数：第一个参数是一个getter函数，它返回要监视的响应式数据；第二个参数是一个回调函数，当监视的数据变化时会被调用。
    • 在这个例子中，我们监视state.count的变化，一旦它变化，就会打印新旧值，并更新state.doubleCount为state.count的两倍。

  2. watchEffect示例：

    • watchEffect接受一个函数作为参数，这个函数内部包含了需要执行的副作用逻辑。
    • 不像watch那样需要显式地指定依赖，watchEffect会自动追踪其内部使用的所有响应式数据，当这些数据变化时，函数会重新运行。

  3. 模拟数据变化：

    • 我们使用setTimeout来模拟state.count的变化。在一秒钟后，state.count增加1，这将触发watchEffect内部的打印逻辑和watch的回调函数。

这些功能使得Vue 3能够更加灵活地处理数据变化和副作用，从而构建响应式的用户界面和数据驱动的应用程序。

 

七、Computed属性

在Vue 3中，computed属性用于定义一个基于响应式数据计算得出的属性，它会根据其依赖的响应式数据自动更新。下面是一个示例代码和相应的注释：

import { reactive, computed } from 'vue';

const state = reactive({
  count: 0,
});

// 定义一个computed属性
const doubleCount = computed(() => {
  return state.count * 2; // 根据state.count计算得出doubleCount
});

// 模拟数据变化
setTimeout(() => {
  state.count++;
}, 1000);

// 打印computed属性的值
console.log(doubleCount.value); // 初始值为0，因为count还没有变化

// 监听computed属性的变化
watchEffect(() => {
  console.log(`doubleCount的值是：${doubleCount.value}`);
});

// 模拟数据变化后再次打印computed属性的值
setTimeout(() => {
  console.log(doubleCount.value); // 输出变为2，因为count变为1后，doubleCount更新为2
}, 2000);

注释解释：

  1. 定义computed属性：

    • 使用computed函数来定义一个计算属性doubleCount，它接受一个函数作为参数，这个函数返回计算后的值。
    • 在这个例子中，doubleCount是state.count的两倍。

  2. 访问computed属性：

    • 计算属性的值可以通过.value来访问。初始时，doubleCount.value为0，因为state.count初始值为0。

  3. 模拟数据变化：

    • 使用setTimeout来模拟state.count的变化。一秒后，state.count增加1，这会触发doubleCount的重新计算。

  4. 监听computed属性的变化：

    • 使用watchEffect来监听doubleCount的变化。每当doubleCount发生变化时，打印其值。

  5. 再次打印computed属性的值：

    • 两秒后再次打印doubleCount.value，它会输出2，因为在第二秒时，state.count变为1，所以doubleCount被重新计算为2。

通过computed属性，Vue 3能够自动追踪依赖关系，只有在其依赖的响应式数据变化时才重新计算，从而提高了性能和代码的清晰度。

标签：count,Vue,近万字,零到,reactive,state,vue,Vue3,ref
From： https://blog.csdn.net/m0_64192735/article/details/140120702

相关文章

  • vue2、vue3 纯SCSS 实现环形进度条
    vue3纯SCSS实现环形进度条<template><viewclass="flexalign-centerdiygw-col-24justify-center"><viewclass="progress-circle":class="`progress-${innerPercent}`"><viewclass=&quo......
  • ant-ui+vue3使用踩坑记录
    1、table组件使用Summary合计时，明明设置summary的fixed属性，设置固定还是没有生效！滚动的时候合计栏还是会滚动代码    通过查看官方文档，发现还要配合设置SummaryCell的index序号进行指定   解决方法如下，那个栏目需要固定就设置相应的index 效果 ......
  • Vue3手写一个全局命令式loading组件
    实现效果：vue文件中，打开全局loading...2s后关闭全局命令式loading，效果展示完，直接咱就是上代码 注册：  <!--src/components/myLoading/index.vue--><template><!--添加name属性，以添加样式Transition主要做一个淡入淡出的--><Transitionname="zhLoadi......
  • ts vue3 getCurrentInstance 使用，$refs 调用方式
    代码示例可以通过ref变量实现绑定$ref,或者getCurrentInstance来获取$refs/***$ref使用方式，变量名和组件的属性ref值一致*/consthChildRef=ref()console.log(hChildRef,"hChildRef")constinstance=getCurrentInstance()//constself=(instanceasComponen......
  • vue3一些高阶用法
    1.ref和reactive首先，让我们从Vue3最基础也是最常用的两个方法开始：ref 和 reactive。它们是响应式基础。refref 用于定义一个响应式的数据对象。它适用于单个基本类型或对象的场景。<scriptsetup>import{ref}from'vue'constcount=ref(0)functionincr......
  • 自定义vue3 hooks
    文章目录hooks目录结构demohooks当页面内有很多的功能，js代码太多，不好维护，可以每个功能都有写一个js或者ts，这样的话，代码易读，并且容易维护，组合式setup写法与此结合......
  • 一个项目学习Vue3---Vue模板方法
     内容资源下载：关注公众号(资小库)，下载相关资源分析下面一段代码，学习模板方法的可能的知识<template><div><div>将下面的msg属性放到上面来:{{msg}}</div><divv-html="htmlMsg"></div><divv-bind="id">这个地方绑定了一个ID{{id}}</div>......
  • Vue3学习（一）
    创建组件实例：我们传入 createApp 的对象实际上是一个组件import{createApp}from'vue'//从一个单文件组件中导入根组件importAppfrom'./App.vue'constapp=createApp(App)大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。App(rootcomponent)├......
  • 【linux】从零到入门
     linux概述Linux是一个免费使用和自由传播的一套操作系统。用户可以无偿地得到它地源代码，和大量地应用程序，并且可以随意修改和增加它们。Linux的内核起初由林纳斯编写。内核是啥？驱动设备，文件系统，进程管理，网络通信等等……内核其实不是一个完整的操作系统。厂家将内核和各......
  • C语言大师之路：从零到王者/新手入门（3）选择语句
    序（一些闲话）我希望我的语言不要像专业书那样让人眼花缭乱，所以当我解释语法时，我会尽量避免使用太多专业术语，让说明更容易理解。我会用通俗易懂的语言来解释，而不是像专业书籍那样让人感到困惑。本人计划通过文章分享C语言的核心知识点和学习心得。鉴于仍处于学习阶段，文章中可......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99