Welcome Vue’ s world 1

最新推荐文章于 2024-10-11 19:03:40 发布

汪大为 —— 无为而无不为

最新推荐文章于 2024-10-11 19:03:40 发布

阅读量180

点赞数

分类专栏：深入感受Vue系列文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/wdw18668109050/article/details/129787686

版权

深入感受Vue系列专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章探讨了前端技术中Vue框架的发展，强调了保持更新以适应变化的重要性。作者列举了在Vue2、Vue2与Vue3混合以及纯Vue3的写法示例，特别提到了Vue3中`setup`函数的使用和`this`的改变，并指出Vue3的`<scriptsetup>`语法糖在单文件组件中的应用。

摘要由CSDN通过智能技术生成

前端技术欣欣向荣的表象，预示着其纷纭变幻让人无所适从，唯有花时间跟进才能让我们不被淘汰。

作此系列，证明我的学习与整理知识的过程。(以后用“v” 简称vue)，22023年以进入vue3的时代，所以以当下的Vue发展演进中，Vue3的向下兼容的考虑，所以当下积累了三种v的写法 --- 纯vue2写法;vue2混v3写法；纯vue3写法。

template 如下：

<template>
  <HelloWorld :msg="word" />
  <hr>
  change me button : <button @click="changeMe">   {{ me }}</button>
  <router-view></router-view>
</template>

v2 style:

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name:'App',
  components: {
    HelloWorld
  },
  data() {
    return {word: 'hello world !!!',me:'wang da wei'}
  }
  ,
  methods:{
    changeMe(){
        this.me = 'davis'
    }
  }
}
</script>

v3 mix v2 's coding style

<script>
    import HelloWorld from '@/component/HelloWorld.vue'
    export default {
        data(){
            return { word:'hello world !!!'}
        }
        ,
        components:{HelloWorld},
        setup(){
            let me = ref('hello world');
        }
        
    }
</script>

v3中的setup 中的this是undefined 的，且生命周期比较靠前，相当beforeCreate和beforeCreated，所以v2的配置中你可以访问v3的定义，但是v3的配置无法访问v2的定义。

v3 's style ：

<!-- keyPoint 利用<script setup>的 纯Vue3 coding style
  是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖.
  注意这里并没有写vue2的components:{HelloWorld}，-->
<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
import {ref} from "vue";
  let me = ref('wang da wei');
  function changeMe(){
    me.value='My'
    console.log(me)
  }
</script>