vue2与vue3区别

前端菜鸟--LKX

于 2022-06-22 22:56:38 发布

阅读量261

点赞数

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/lkx_20201106/article/details/125400025

版权

vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue2和Vue3在引入方式和渲染函数上的区别，并通过示例展示了Vue3中`setup`函数的使用。在Vue3中，`setup`函数允许开发者访问到响应式数据和方法，但需要注意Vue2与Vue3之间的方法调用不兼容问题。文章探讨了Vue3的特性，包括组合API，以及在组件间交互的挑战。

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

1.工程结构
vue2

// vue2引入的是一个构造函数, vue3引入的是一个createApp工厂函数
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

setup()

<template>
  <h1>setup</h1>
  <hr>
  <div>{{name}}</div>
  <div>{{age}}</div>
  <div>{{six}}</div>
  <button @click="sayHello">vue3--sayHello</button> <br>
  <button @click="sayHai">vue2--sayHai</button> <br>
  <!-- vue2可以调vue3的方法 -->
  <button @click="diaoSayHello">vue2调vue3</button> <br>
  <!-- vue3调不了vue2的方法 vue3和vue2不建议一起使用-->
  <button @click="diaoSayHai">vue3调vue2</button>
</template>

<script>
export default {
  name: 'Vue3Study01Setup',

  data() {
    return {
      six: '男',
    }
  },
  methods:{
    sayHai(){
      alert('hai!')//能调
    },
    diaoSayHello(){
      this.sayHello() //能调
    }
  },

  setup(){
    let name = 'lin';
    let age = 18
    function sayHello(){
      alert('hello!')//能调
    }
    function diaoSayHai(){
      console.log(this.sayHai());//报错
    }
    return {
      name,age,sayHello,diaoSayHai
    }
  }
};
</script>

<style lang="scss" scoped>

</style>