首页 > 其他分享 >Vue3之setup

Vue3之setup

时间:2022-12-27 09:00:20浏览次数:33  
标签:console log setup 配置 vue3 Vue3 name

setup

setup是vue3中的一个新的配置项,值为一个函数,我们在组件中用到的数据、方法等等,都要配置在setup中。

setup函数的返回值有两种
1、返回一个渲染函数,可以自定义渲染内容

 

2、返回一个对象,对象中的属性和方法在模板中可以直接使用
(1)在vue2的配置中可读取到vue3配置中的属性和方法

(2)在vue3的配置中不能读取vue2配置中的属性和方法

(3)如果vue2和vue3的配置有冲突,则vue3的setup优先

注意点:
(1)vue2和vue3的配置尽量不要混用
(2)setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

App.vue

<template>
    <h1>一个人的信息</h1>
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <h2>性别:{{sex}}</h2>
    <h2>a的值是:{{a}}</h2>
    <button @click="sayHello">说话(Vue3所配置的——sayHello)</button>
    <br>
    <br>
    <button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button>
    <br>
    <br>
    <button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button>
    <br>
    <br>
    <button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button>

</template>

<script>
    // import {h} from 'vue'
    export default {
        name: 'App',
        data() {
            return {
                sex:'男',
                a:100
            }
        },
        methods: {
            sayWelcome(){
                alert('欢迎来到尚硅谷学习')
            },
            test1(){
                console.log(this.sex)
                console.log(this.name)
                console.log(this.age)
                console.log(this.sayHello)
            }
        },
        //此处只是测试一下setup,暂时不考虑响应式的问题。
        async setup(){
            //数据
            let name = '张三'
            let age = 18
            let a = 200

            //方法
            function sayHello(){
                alert(`我叫${name},我${age}岁了,你好啊!`)
            }
            function test2(){
                console.log(name)
                console.log(age)
                console.log(sayHello)
                // sex是在vue2方式配置的  访问不到
                console.log(this.sex)
                console.log(this.sayWelcome)
            }

            //返回一个对象(常用)
            return {
                name,
                age,
                sayHello,
                test2,
                a
            }

            //返回一个函数(渲染函数)
            // return ()=> h('h1','尚硅谷')
        }
    }
</script>

 

main.js

//引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm,但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

 

标签:console,log,setup,配置,vue3,Vue3,name
From: https://www.cnblogs.com/anjingdian/p/17007322.html

相关文章

  • Vue3之创建工程
     创建Vue3工程 VueCli脚手架创建工程 类似于之前创建的vue2工程,我们在需要创建工程的文件下打开cmd,执行创建的工程命令:成功: 分别执行蓝色的命令来启动,根据生成......
  • vue3_01生命周期函数
    <template><div><p>这是第一个组件</p></div></template><scriptlang="ts">import{defineComponent,onBeforeMount,onMounted}fr......
  • Vue3快速上手,Vue3全解
    1.Vue3简介2020年9月18日,Vue.js发布3.0版本,代号:OnePiece(海贼王)耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址:https://github.com/vuejs/vue......
  • Vue3中页面不能根据props数据动态变化怎么办?
    解决方法:使用toRefs结构,使其具有响应式,再使用!import{reactive,defineProps,toRefs}from'vue';constprops=defineProps({xAxisData:{type:Array,......
  • Jeecgboot-Vue3 v1.2.0 版本正式发布,企业级低代码平台
    项目介绍Jeecgboot-Vue3采用Vue3.0、Vite、Ant-Design-Vue、TypeScript等新技术方案,包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。Je......
  • vue3项目,记录我是如何用1h实现产品预估1天工作量的界面需求
    最近在编写前端界面,硬是一人一周时间加班加点写完了一个项目的前端界面(一级菜单有12个页面+一个控制台大屏,二三级界面有N个),之前预估前端界面的编写需要一个月,我是自己把......
  • vue3的setup函数的使用
     setup的使用:1.setup函数时,它将接受两个参数:(props、context(包含attrs、slots、emit))context包含三个参数,可通过解构方式写context该上下文对象是非响应式的,可以安......
  • vue3 ref 传参
    1 子组件Demo里:<scriptsetup>import{ref}from'vue'letceshi=ref(520)defineExpose({//通过defineExpose将子组件内部数据暴露给父组件!!!!c......
  • vue3 组件传参
    父传子父组件绑定传参(:img_type="img_type")不绑定只能传字符串import{defineProps}from'vue'letprops=defineProps({//子组件接收父组件传递过来的值......
  • Vue2和Vue3使用vue-print-nb实现打印功
    Vue2和Vue3使用vue-print-nb实现打印功Vue2使用vue-print-nb实现打印功Vue3使用vue3-print-nb实现打印功Vue2Vue2.0版本安装方法:npminstallvue-print-nb--save/......