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

举报
青年码农 发表于 2022/08/24 23:41:54 2022/08/24
849 0 0
【摘要】 上一篇已经对Vue2和Vue3的组件开发区别讲了一部分,如需了解请移步: 带你体验Vue2和Vue3开发组件的区别(一), 主要讲了template、data、methods、Lifecyle Hooks这几个的区别,接下来我们再讲讲另外几个属性的变化。 1.Computed Properties Computed Pro...

上一篇已经对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对象时,需要使用函数返回值的方法

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/125067100

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。