Vue-cli
升级vue-cli v4.5
npm i -g @vue/cli@next
vite工具
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
compostion api
为vue提供了更好的逻辑复用和代码逻辑
<h1>{{counter}}</h1>
<h2>{{num}}</h2>
<p ref="desc"></p>
</div>
</template>
<script>
import {computed, reactive, onMounted, onUnmounted, toRefs, watch, ref} from "vue";
export default {
name: 'HelloWorld',
props: {
msg: String
},
setup(){
const {counter,num}=getcounter()
//使用元素引用
const desc = ref(null)
//监听器
watch(counter,(val,oldVal)=>{
const p = desc.value
p.textContent=`change from ${oldVal} to ${val}`
})
return {counter,num,desc}
}
}
function getcounter(){
const data= reactive({
counter:1,
num: computed(() => data.counter*2)
})
//定时器
let timer
onMounted(()=>{
timer = setInterval(()=>{
data.counter++
},1000)
})
//什么时候移除
onUnmounted(()=>{
clearInterval(timer)
})
return toRefs(data)
}
</script>
- reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组
- ef:用于给基本类型的数据添加响应式
- reactive用于给对象添加响应式
- computed这个计算属性方法，接收一个getter函数，返回一个默认不可手动修改的ref对象
- toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行
- 为了访问到DOM元素的值，要用到ref属性
ref和reactive的区别
ref也可以传入对象，也可以实现响应式，其内部会自动调用reactive方法
reactive传入基本类型控制台会出警告，并且不会实现响应式
给ref的响应式对象赋值的时候要用.value的形式赋值
