# hello_vue3

**Repository Path**: codelife1224/hello_vue3

## Basic Information

- **Project Name**: hello_vue3
- **Description**: vue3学习代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-23
- **Last Updated**: 2023-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 拉开序幕的setup
**setup 概述**

`setup`是`vue3`中一个新的配置项，值是一个函数，它是`Composition API`"表演的舞台",组件中所有的:数据、方法、计算属性、监视等等，均配置在`setup`中


选项式（配置式）API
```javascript
export default {
    name: 'Person',// 组件名
    // 数据区
    data() {
        return {
            name: '张三',
            age: 18,
            tel: '12341234'
        }
    },
    // 方法区
    methods: {
        changeName() {
            this.name = 'zhang-san'
        },
        changeAge() {
            this.age += 1
        },
        showTel() {
            alert(this.tel)
        },
    },
}

```

**setup写法**

```javascript
export default {
    name: 'Person',// 组件名
    beforeCreate() {
        console.log('beforeCreate')
    },
    setup() {
        console.log('setup')
        // 注意 setup函数中的this是undefined,而不是vue实例,Vue3中已经弱化this了
        // console.log(this)
        // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
        let name = '张三'
        let age = 18
        let tel = '123123123123'

        // 方法
        function changeName() {
            console.log(1) // 注意：这样修改name，页面是没有变化的
            name = 'zhang-san'
            console.log(name); // name确实改了，但name不是响应式的
        }

        function changeAge() {
            console.log(2)
            age += 1
            console.log(age);

        }

        function showTel() {
            console.log(3)
            alert(tel)
            console.log(tel);

        }

        return {
            name,
            age,
            changeName,
            changeAge,
            showTel
        }
    }
}
```

## setup的返回值

setup的返回值可以是**对象**也可以是**渲染函数**
渲染函数：因为可以把函数的返回值渲染到页面上


```javascript

export default{
    name:'Person', //组件名
    setup(){
        // return {}
        
        
        //return function(){
        //    return '哈哈'
        //}
        return ()=> '哈哈'
    }

}


```

> 注意：渲染函数没有this所以可以是箭头函数也可以是普通函数

## setup data methods之间的关系(面试题)


1. data(){}与setup(){}可以同时存在
2. methods(){}与setup()也可以同时存在

```javascript

data() {
    return {
        a: 100
    }
},
methods: {
    b() {
        alert('b')
    }
},
setup() {
    console.log('setup')
    // 注意 setup函数中的this是undefined,而不是vue实例,Vue3中已经弱化this了
    // console.log(this)
    // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
    let name = '张三'
    let age = 18
    let tel = '123123123123'

    // 方法
    function changeName() {
        console.log(1) // 注意：这样修改name，页面是没有变化的
        name = 'zhang-san'
        console.log(name); // name确实改了，但name不是响应式的
    }

    function changeAge() {
        console.log(2)
        age += 1
        console.log(age);

    }

    function showTel() {
        console.log(3)
        alert(tel)
        console.log(tel);

    }

    return {
        name,
        age,
        changeName,
        changeAge,
        showTel
    }
}
```
**总结**
- vue2的选项试语法与vue3的setup语法可以共存
- 旧的语法可以读出setup语法的数据，但是setup语法里面的数据是不可以读取旧语法里面的数据
- 最好不要把vue2的旧语法和vue3的setup语法混合写

### setup语法糖

```javascript
// 数据
let name = '张三'
let age = 18
let tel = '123123123123'
let address = '北京昌平区宏福苑·宏福科技园'

// 方法
function changeName() {
    console.log(1) // 注意：这样修改name，页面是没有变化的
    name = 'zhang-san'
    console.log(name); // name确实改了，但name不是响应式的
}

function changeAge() {
    console.log(2)
    age += 1
    console.log(age);

}

function showTel() {
    console.log(3)
    alert(tel)
    console.log(tel);

}
```

- 对比
```javascript
<script lang="ts">
export default {
    setup(){
        let a = 666;
        return {
            a
        }
    }
}
</script>

<script lang="ts" setup>
let a = 666
</script>

```