npm i @vue/cli -g 

vue create mv3 //mv3為項(xiàng)目名稱

cd /mv3
npm run serve

import {onMounted} from 'vue'

import { ref } from 'vue' //使用前先導(dǎo)入
 
const counter = ref(0)
 
console.log(counter) // { value: 0 }
console.log(counter.value) // 0
 
counter.value++
console.log(counter.value) // 1

import {reactive} from 'vue'
// 定義一個(gè)引用類型的響應(yīng)式數(shù)據(jù)list 默認(rèn)是
const list = reactive(["vue","react","angular"])

var twiceNum = computed(()=>num.value*2)

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

<template>
    <span>
        <button @click="count--">-</button>
        <input type="text" style="width:90px;" v-model="count">
        <button @click="count++">+</button>
    </span>
</template>
<script setup>
//defineProps定義props
import {defineProps,ref,watch,defineEmits,watchEffect,defineExpose} from 'vue'
//定義props傳入?yún)?shù)
const props=defineProps({
    //類型為數(shù)字或者字符串，默認(rèn)值為1
    value:{type:[Number,String],default:1}
})
//定義一個(gè)響應(yīng)式對(duì)象初始值為props.value
const count=ref(props.value);
//定義事件發(fā)送器
var emits=defineEmits(["input"]);
//監(jiān)聽(tīng)count的變化
watch(count,()=>{
    //發(fā)送一個(gè)inout事件  事件值為count的value
    emits("input",count.value);
})
//只要watchEffect中出現(xiàn)了數(shù)據(jù)，數(shù)據(jù)發(fā)生變化都會(huì)被執(zhí)行
watchEffect(()=>{
    count.value=props.value;
})
//defineExpose規(guī)定了組件哪些值可以被引用獲取
defineExpose({count})
</script>

<template>
  <div>
    <h1>setup</h1>
    <button @click="num++">{{num}}</button>
    <stepper-com :value="10" @input="num=$event"></stepper-com>
  </div>
</template>
<script setup>
//使用setup可以簡(jiǎn)寫(xiě)（不用導(dǎo)出，組件不用注冊(cè)）
import StepperCom from '@/components/StepperCom.vue'
import {ref} from 'vue'
    const num=ref(5)
</script>

import {ref,onMounted,onBeforeUnmount} from 'vue'
export function useWinSize(){
    const size=ref({width:1920,height:1080});
    //窗口變化時(shí)更新size
    function onResize(){
        size.value={
            //用窗口的最新寬高更新width和heigth
            width:window.innerWidth,
            height:window.innerHeight
        }
    }
    //組件掛載完畢更新size
    onMounted(()=>{
        window.addEventListener("resize",onResize);
    })
    //組件要卸載的時(shí)候移除事件監(jiān)聽(tīng)
    onBeforeUnmount(() => {
        window.removeEventListener("resize",onResize);
    })
 
    return size;
}

<template>
  <div>
    <h1>可視區(qū)域?qū)挾扰c高度</h1>
    <p>{{size}}</p>
  </div>
</template>
<script setup>
 
//導(dǎo)入useWinSize方法
import {useWinSize} from '@/utils/utils.js'
 
//方法執(zhí)行，返回一個(gè)對(duì)象size
const size=useWinSize();
 
</script>