您好,欢迎来到网暖!

当前位置:网暖 » 站长资讯 » 建站基础 » 网络技术 » 文章详细 订阅RssFeed

带你体验Vue2和Vue3开发组件的区别(二)

来源:网络整理 浏览:259次 时间:2022-11-30

上一篇已经对Vue2和Vue3的组件开发区别讲了一部分,如需了解请移步:

带你体验Vue2和Vue3开发组件的区别(一),

主要讲了template、data、methods、Lifecyle Hooks这几个的区别,接下来我们再讲讲另外几个属性的变化。

1.Computed Properties

Computed Properties-计算属性,这里就不多讲,只做个对比,如果需要了解详细的计算属性可以参照Vue中的computed和watch的区别,里面解释了计算属性的详细用法及和watch的区别。

Vue2

export default {  // ..   computed: {    formatData() {      // 方法    }  }}

Vue3

Vue3 使用计算属性,需要先在组件内引入computed。

import { reactive, computed } from 'vue'export default {  setup () {    const data = reactive({      userName: '',      lowerCaseUsername: computed(() => data.userName)    })    // ..  }}

2.Emitting Events

自定义事件大多数用在组件间通讯上。

Vue2

在Vue2中我们直接用this.$emit触发,,前面是方法名称,后面是参数。

this.$emit('login', {})

Vue3

Vue3中,this的指向已经变了,所以在setup中不能使用this,

setup (props, { emit }) {    // ...    const login = () => {      emit('login', {})    }    // ...}

setup()方法可以接收两个参数:

  1. props - 不可变的组件参数

  2. context - Vue3 暴露出来的属性(emit,slots,attrs)

3.Props

接收父组件props参数传递这一块区别也蛮大,主要是this不能使用了。

Vue2

this代表的是当前组件,所以可以直接获取属性值

<template>  <div class="about">    <button @click="clickBtn">点击</button>  </div></template><script>export default {  props: {    title: String  },  data() {    return {    };  },  methods: {    clickBtn() {      console.log(this.title);    }  }};</script>

Vue3

this无法直接拿到props属性,但是setup提供了参数,我们可以获取。

<template>  <button @click="clickBtn">点击</button></template><script>import { reactive } from "vue";export default {  props: {    title: String  },  setup(props) {    const data = reactive({});    const clickBtn = () => {      console.log(props.title);    };    return {      clickBtn,      data    };  }};</script>

4.watch

看到上面的,应该能想到使用区别了。

Vue2

如想要了解Vue2 watch的详细信息请:

Vue中的computed和watch的区别

<template>  <div>    <input type="text" v-model="a" />    <div>a={{ a }}</div>    <div>c={{ c }}</div>  </div></template><script>export default {  data() {    return {      a: "",      c: ""    };  },  watch: {    a(val) {      console.log(val);      this.c = val + "数据";    }  }};</script>

Vue3

首先从vue中引入,接下来

<template>  <input type="text" v-model="data.username" placeholder="Username" /></template><script>import { reactive, watch } from "vue";export default {  setup() {    const data = reactive({      username: ""    });    // 监听    watch(      () => data.username,      (oldVlaue, newValue) => {        console.log(oldVlaue, newValue, "改变");      }    );    return {      data    };  }};</script>

第一个参数是一个响应式对象
第二个是对象发生变化时执行的函数体
回调函数包含两个参数,分别为 newValue ,oldValue
可以监听多个对象,第一项改为数组即可
如果监听reactive对象时,需要使用函数返回值的方法

推荐站点

  • 腾讯腾讯

    腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站,是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户,致力成为最具传播力和互动性,权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务,为中国数以亿计的互联网用户提供富有创意的网上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐网是全球最大的中文门户网站,为用户提供24小时不间断的最新资讯,及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息,以及论坛、博客、微博、我的搜狐等互动空间。

    www.sohu.com
  • 网易网易

    网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。

    www.163.com
  • 新浪新浪

    新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com