前端学习-vue视频学习003-setup(重要)

学习教程-尚硅谷视频

将原vue2的格式改为vue3---使用setup

要点：

• this在vue3中被弱化，setup函数中不能使用this
• 定义数据时，如果不是响应式的（暂时还不是很理解响应式），不会触发页面的变化
• vue3支持一个标签直接写多次，如

<template>
    <Person/>   
    <Person/>
    <Person/>
</template>

• 在setup中使用return，才能将数据和方法交到外部使用
  Person.vue

<template>
    <div class="person">
        <h2>name:{{ name }}</h2>
        <h2>age:{{ age }}</h2>
        <button @click="changeName">changeName</button>
        <button @click="changeAge">changeAge</button>
        <button @click="showTel">click</button>
    </div>
</template>

<script lang="ts">
    export default {
        name:'Person',
        setup() {
            // setup函数中的this是undefined
            // 数据
            let name = 'ssss' // 非响应式
            let age = 20 // 非响应式
            let tel = '1234567889' // 非响应式

            // 方法
            function changeName() {
                name = '3dfgb' // 这样修改，页面不会变化，但name确实改了
            }
            function changeAge() {
                age++ // 这样修改，页面不会变化，但age确实改了
            }
            function showTel() {
                alert(tel)
            }
            return {name,age,changeName,changeAge,showTel}
        }
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    
    button {
        margin : 0 5px;
    }
</style>

setup的返回值

• 对象
  return {name,age,changeName,changeAge,showTel}
• 也可以是渲染函数
  ·return ()=> 'lalala'

data、method（vue2语法） 和 setup（vue3语法）同时存在

• 由于setup加载得更快，因此data里可以读取到setup里的数据
• setup无法读取到data里的数据

setup 语法糖

语法糖可以省略setup()和return返回值，默认返回数据和方法

<script lang="ts">
    export default {
        name:'Person',
    }
</script>

<script lang="ts" setup>
    let name = 'ssss' // 非响应式
    let age = 20 // 非响应式
    let tel = '1234567889' // 非响应式
    // 方法
    function changeName() {
        name = '3dfgb' // 这样修改，页面不会变化，但name确实改了
    }
    function changeAge() {
        age++ // 这样修改，页面不会变化，但age确实改了
    }
    function showTel() {
        alert(tel)
    }
</script>

控制组件名称

• 方式1

<script lang="ts">
    export default {
        name:'Person',
    }
</script>

• 方式2
  在script标签增加name属性+借助插件
  首先在终端安装开发依赖
  npm i vite-plugin-vue-setup-extend -D
  安装成功后，修改vite.config.ts文件，引入刚刚下载的依赖
  import xxx from 'vite-plugin-vue-setup-extend'(xxx是组件名称，可以自己起名)，同时在插件语句中追加调用，整体如下

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

此时就可以在标签中增加name

<script lang="ts" setup name="aaaaaa">
    let name = 'ssss' // 非响应式
    let age = 20 // 非响应式
    let tel = '1234567889' // 非响应式
    // 方法
    function changeName() {
        name = '3dfgb' // 这样修改，页面不会变化，但name确实改了
    }
    function changeAge() {
        age++ // 这样修改，页面不会变化，但age确实改了
    }
    function showTel() {
        alert(tel)
    }
</script>

效果如图

• 方式3
  一般情况下，组件名称会展示为文件名（如果不是特殊设置）
  因此只要命名好文件就可以了