入口-setup 

在组件渲染时会优先执行 setup 中代码，执行时机为 beforeCreate 之前

setup 方法中的对象若想要在 template 中使用，需要将方法 return 出去:

<script>
export default {
  setup() {
    console.log('setup had run')
    const msg = "hello vue3"
    const logMsg = () => {
      console.log(msg)
    }
    return {
      msg,
      logMsg
    }
  }
}
</script>

<template>
  <div>
    <!-- 输出 msg 信息到页面 -->
    {{msg}}
    <br>
    <button @click="logMsg"> botton</button>
  </div>
</template>

 以上代码可以用语法糖将其简化，只需在 script 标签添加 setup 即可，语法糖替代我们完成了 return 操作以及 export default 的操作

<script setup>
    console.log('setup had run')
    const msg = "hello vue3"
    const logMsg = () => {
      console.log(msg)
    }
</script>

reactive 和 ref 函数

reactive 的使用示例,将 state 的对象内容包裹：

<script setup>
//导入函数
import { reactive } from 'vue'
//执行函数，传入一个对象类型的参数，变量接收
const state = reactive({
  count: 0
})
const addCount = () => {
  state.count++
}
</script>

<template>
  <div>
    <button v-on:click="addCount">{{state.count}}</button>
  </div>
</template>

 

若不使用 reactive 函数，则对象不会被动态的渲染到页面

若想要对非对象类型也添加,则可以使用 ref 函数

ref 即支持简单类型，也支持对象类型

<script setup>
//导入函数
import { ref } from 'vue'
//执行函数，传入一个对象类型的参数，变量接收
const state = ref({
  count: 0
})
const addCount = () => {
  //ref 产生的响应式对象数据，需要通过 .value() 获取
  state.value.count++
}
</script>

<template>
  <div>
    <button v-on:click="addCount">{{state.count}}</button>
  </div>
</template>

 computed 计算属性函数

<script setup>
//导入函数
import { ref } from 'vue'
//执行函数，传入一个对象类型的参数，变量接收
const count = ref(0)
const addCount = () => {
  //ref 产生的响应式对象数据，需要通过 .value() 获取
  count.value++
}
const arr = ref([1,2,3,4,5,6,7,8])
//导入 computed
import {computed} from 'vue'
//拿到 大于2 的所有数
const moreThan2 = computed(()=>{
  return arr.value.filter(item => item > 2)
})
</script>

<template>
  <div>
    <button v-on:click="addCount">{{count}}</button>
  </div>
  <br>
  <div>
    {{arr}}
    <br>
    大于2的元素有：{{moreThan2}}
  </div>
</template>

 

设置 3 秒后执行自定义函数：

setTimeout(() => {
  arr.value.push(9,10)
},3000)