vue3- 02vue3的变化

这篇具有很好参考价值的文章主要介绍了vue3- 02vue3的变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. main.js

  1. 创建实例不再使用构造函数,而是使用createApp
  2. 使用插件时不再通过构造函数,而是通过实例
    vue3- 02vue3的变化,vue3,vue.js,javascript,前端

2. 组件

1. this指向不同

  1. vue2的this指向是组件
  2. vue3的this指向是proxy(代理,代理的是组件实例)
<template>
  <p>
    <button @click="handleIncrease">count: {{ count }}</button>
  </p>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods:{
    handleIncrease(){
      console.log(this);
      this.count++;
    }
  }
}
</script>

<style></style>

vue3:
vue3- 02vue3的变化,vue3,vue.js,javascript,前端
vue2:
vue3- 02vue3的变化,vue3,vue.js,javascript,前端

总结:组件实例代理:

vue3- 02vue3的变化,vue3,vue.js,javascript,前端

2. composition api(组合api)

1. setup(): 设置组件的初始状态和行为
## 在学习组合api之前,先了解以下 setup。
 Vue 3 的 setup 函数用于设置组件的初始状态和行为。它是组件中的一个特殊函数,在组件实例创建之前执行,并且在其他选项(如 data、computed、methods 等)之前运行。

setup 函数接收两个参数:props 和 context。props 参数用于接收组件的属性,而 context 参数提供了一些与组件实例相关的上下文信息,如 attrs、slots、emit 等。
vue3- 02vue3的变化,vue3,vue.js,javascript,前端
vue3- 02vue3的变化,vue3,vue.js,javascript,前端

2. ref(): 用于创建响应式数据的函数

## 在学习组合api之前,先了解以下ref。
   ref 是一个用于创建响应式数据的函数。它的作用是将一个普通的 JavaScript 值转换为一个响应式对象。
## 下面的图是vue3对ref的处理(通过代理)。也是因为下方提到的 在setup中,count是一个对象,实际代理中count是一个count.value  的原因。

vue3- 02vue3的变化,vue3,vue.js,javascript,前端

3. 配置式api和组合式api

vue2:配置式api。也叫option api(如data、methods、computed、prop):比较零散,会分布在不同的配置中。
vue3:组合api。代码比较集中,可以把整个相关的数据、方法抽离到一个函数或组件,再return,如第二个例子。

<template>
  <p>
    <button @click="countRef++">count: {{ countRef }}</button>
    <button @click="handleIncrease">count: {{ countRef }}</button>
  </p>
</template>

<script>
// ref用于创建一个响应式数据
import { ref } from "vue";


export default {
  setup() {
    // 1. console.log('在所有的声明周期钩子函数之前调用')
    //2.  console.log(this); setup函数里面的this为undefined
    let countRef = ref(0); //会返回一个响应式的数字

    // 3. 在setup中,count是时一个对象
    //    实际代理中count是一个count.value
    const handleIncrease = () => {
      countRef.value++;
    }
    // 新增

    // 修改

    // 删除

    // 4. 需要将使用到的东西return给模板和其它的组件
    return {
      countRef,
      handleIncrease,
    }

  }
}
</script>

<style></style>

第二个例子:

<template>
    <h1>count:{{ countRef }}</h1>
    <p>
        <button @click="handleDecrease">count: {{ countRef }}</button>
        <button @click="handleIncrease">count: {{ countRef }}</button>
    </p>
</template>
  
<script>
// ref用于创建一个响应式数据
import { ref } from "vue";
// 5. 使用组合式api代码不会零散、杂乱
function useCount() {
    let countRef = ref(0);
    const handleIncrease = () => {
        countRef.value++;
    };
    const handleDecrease = () => {
        countRef.value--;
    }
    return {
        countRef,
        handleIncrease,
        handleDecrease
    }
}

export default {
    setup() {
        return {
            ...useCount(), // 解构赋值
        }

    }
}
</script>
  
<style></style>

3. watchEffect

watchEffect 函数:用于创建一个响应式的副作用函数。它的作用是在其依赖的响应式数据发生变化时自动运行副作用函数。

假设你正在开发一个待办事项应用,其中有一个任务计数器用于显示未完成的任务数量。你可以使用 watchEffect 来实时更新任务计数器的值,以便在任务列表发生变化时自动更新计数。
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const todos = ref([
      { id: 1, title: '学习Vue', completed: false },
      { id: 2, title: '编写文档', completed: true },
      { id: 3, title: '提交代码', completed: false },
    ]);

    const unfinishedCount = ref(0);

    watchEffect(() => {
      unfinishedCount.value = todos.value.filter(todo => !todo.completed).length;
    });

    return {
      todos,
      unfinishedCount
    };
  }
};

总结:
在上面的代码中,我们首先定义了一个 todos 数组,其中包含了待办事项的列表。然后,我们创建了一个 unfinishedCount 变量,并初始化为 0,用于存储未完成的任务数量。

接下来,我们使用 watchEffect 函数创建了一个响应式的副作用函数。在这个副作用函数中,我们监听 todos 数组的变化。每当 todos 数组发生变化时,副作用函数会被触发,并计算未完成的任务数量,并将结果赋值给 unfinishedCount。

通过这样的设置,每当 todos 数组中的任务状态发生变化时,unfinishedCount 的值会自动更新,并保持与未完成的任务数量同步。

这是 watchEffect 的一个作用:监听响应式数据的变化,并在变化发生时执行相应的副作用逻辑。

4. 声明周期为普通函数

在 Vue 3 中,声明周期钩子函数已经从配置式的选项(如 beforeCreate、mounted 等)转变为普通的函数。这意味着你可以在组件中直接定义这些函数,而无需将它们作为选项进行配置。

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    // mounted 钩子函数
    onMounted(() => {
      console.log('Component mounted');
    });

    // updated 钩子函数
    onUpdated(() => {
      console.log('Component updated');
    });

    // unmounted 钩子函数
    onUnmounted(() => {
      console.log('Component unmounted');
    });

    return {};
  },
};

总结:
在上面的代码中,我们使用 onMounted、onUpdated 和 onUnmounted 函数来定义组件的生命周期钩子函数。这些函数在组件的不同生命周期阶段被调用,并且可以直接在 setup 函数中定义。

当组件被挂载到 DOM 上时,onMounted 中的回调函数会被执行,输出 ‘Component mounted’。当组件发生更新时,onUpdated 中的回调函数会被执行,输出 ‘Component updated’。当组件从 DOM 上卸载时,onUnmounted 中的回调函数会被执行,输出 ‘Component unmounted’。

通过这种方式,你可以在 Vue 3 中使用普通的函数来定义组件的声明周期逻辑,而不再需要配置式的声明周期选项。这种新的声明周期函数写法更加直观和灵活,使得组件的声明周期管理更加简洁和易于理解。文章来源地址https://www.toymoban.com/news/detail-567020.html

到了这里,关于vue3- 02vue3的变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(65)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(54)
  • vue3创建项目报错Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_ut

    报错信息: Vue.js - The Progressive JavaScript Framework TypeError: (0 , import_node_util.parseArgs) is not a function     at init (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_modulescreate-vueoutfile.cjs:4481:72)     at Object.anonymous (C:UsersAdministratorAppDataLocalnpm-cache_npx2f7e7bff16d1c534node_module

    2024年04月10日
    浏览(163)
  • 服务端使用ASP.NET Core SignalR与Vue3(TypeScript与JavaScript)前端建立通信(以进度条为例)

    1. ASP.NET Core           ASP.NET Core 是一个跨平台、高性能及开源的框架,用于生成基于云且连接互联网的新式应用程式。 官方文档:ASP.NET documentation | Microsoft Learn  2.  ASP.NET Core SignalR         ASP.NET Core SignalR 是开源库,用于服务端与客户端建立实时通信,可以自动管理连接

    2024年02月06日
    浏览(48)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(63)
  • vue3监听路由的变化

    可以使用监听 router.currentRoute.value 的值,,来监听路由的变化。 引入: setup使用 : 控制台输出的值 newValue : 如果我们只需要监听当前路由 name 的变化,就可以这么监听 router.currentRoute.value.name immediate:true //true 就表示会立即执行。(watch默认绑定,页面首次加载时,是不会执行

    2024年02月12日
    浏览(44)
  • Vue3组件不发生变化,如何监听pinia中数据变化?

    在开发过程中,我们需要将一些跨组件使用的的数据在pinia中进行状态管理,组件在初始化的时候我们能通过onMounted,computed,watch,watchEffect获取到存储在pinia state中的内容,有一些特殊情况,在组件初始化之后我们无法通过以上四种情况获取state中的内容,这时候我们怎么做呢?

    2024年02月11日
    浏览(54)
  • JavaScript基础语法02——JS书写位置

    哈喽,大家好,我是雷工! 今天继续学习JavaScript基础语法,JS的书写位置,俗话说:好记性不如烂笔头,边学边记,方便回顾。 代码写在标签内部 示例: 2.1、要将JS代码直接写在HTML文件里面。 2.2、在HTML文件中添加一个script,用script标签包住,script标签中的代码就是JS代码

    2024年02月10日
    浏览(42)
  • Vue2 、vue3 监听对象的变化

    vue响应式也叫作数据双向绑定 MVVM模型 (Model-Viem-ViewModel) DOM listeners:实现了页面与数据的绑定,当页面操作数据的时候 DOM 和 Model 也会发生相应的变化 Data Bindings:  实现了数据与页面的绑定,当数据发生变化的时候会自动渲染页面 2.1  实现原理 vue实现数据响应式,是通过

    2024年02月04日
    浏览(50)
  • vue3 监听props 的变化

    再三说明 仅仅个人学习用,不误导别人 我觉得props 会创建对应的属性,去接受这些值,比如传递一个ref的基本值 age props.age = age.value 传递一个ref的引用值 person props.person= person.value 传递一个reactive的引用值 person props.person= person 最开始时候,props指向了一个响应式的reactive pe

    2024年02月11日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包