computed计算属性函数

计算属性小案例 

App.vue 

<script setup>
import { ref, computed } from 'vue'// 声明数据
const list = ref([1,2,3,4,5,6,7,8])// 基于list派生一个计算属性，从list中过滤出 > 2
const setList = computed(() => {return list.value.filter(item => item > 2)
})// 定义一个修改数组的方法
const addFn = () => {list.value.push(666)
}
</script><template><div><div>原始数据：{{ list }}</div><div>计算后的数据：{{ setList }}</div><button @click="addFn" type="button">修改</button>
</div>
</template>

 总结

watch函数 

基础使用：侦听单个数据 

基础使用：侦听多个数据 

immediate 

deep 

 精确侦听对象的某个属性

总结 

 

生命周期函数

vue3的生命周期API(选项式vs组合式) 

 生命周期函数基本使用

执行多次 

总结