vue3加ts的基础使用---个人学习（一）

1： vue3 和 ts 的一些基础使用

<template>
    <div>
        {{ contber }}   //响应式，视图改变
        {{ redone }}   //计算属性
        <span @click="gooclis">
            点击
        </span>
        {{ nustr }} //非响应式，视图不会改变
    </div>
</template>
<script lang="ts">
import { ref, onMounted, computed } from "vue"
export default {
    name: "HomeIndex",
    setup() {
        let contber = ref(2)
        let conts = ref(2)
        //数组，对象，字符串，数字等类型 可以通过 ref 来进行定义且是响应式       
        // 数组  number[] = [1,2]  /  Array<string> = ['1','2']
        let list: number[] = [1, 2, 3]   //非响应式  数组类型
        let nustr: number = 11    //非响应式   数字类型
        let str: string = '11'   //字符串类型
        
        //调用方法
        onMounted(() => {    
            // gooclis()
            // joggle()
        });
        //如接口等也这样
		const joggle = () => {
		
		}
		//点击事件
        const gooclis = () => {   //定义方法
            contber.value++    //视图改变
            nustr++         //视图不会改变
        }
         //计算属性return返回
        const redone = computed(() => {  
            return conts.value + 1
        })
        // console.log(nustr);
        return {
            contber,
            conts,
            nustr,
            list,
            gooclis,
            redone
        };
    },

}
</script>

<style>
</style>

(1)：vue3 使用 ref 来定义才是响应式，视图跟随改变，并且需要 .value 来获取数据。
(2)：所有代码都要写在 setup 里面，它等同于 vue2 的 beforeCreate 和 created 。