vue2和vue3的todolist比较

Posted 2021-11-07 mqy1023

一、vue2的写法

<template>
  <div id="app">
    <input type="text" v-model="val" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      val:'',
      todos:[ 
        {id:0, title:'吃饭', done:false},
        {id:1, title:'睡觉', done:false},
        {id:2, title:'lsp', done:false},
      ]
    }
  },
  methods:{
    addTodo(){
      this.todos.push({
        id:this.todos.length,
        title:this.val,
        done:false
      })
      this.val = ''
    }
  }
}
</script>

二、vue3的写法

ref() 一般存放的是基本类型数据, 用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个被包装后的对象（RefImpl），这个对象上只有一个 .value 属性，如果我们在setup函数中，想要访问的对象的值，可以通过.value来获取，但是如果是在<template>模板中，直接访问即可，不需要.value

reactive()函数接收一个普通对象，返回一个响应式的数据对象，等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创建响应式的数据对象Observer，ref中我们一般存放的是基本类型数据，如果是引用类型的我们可以使用reactive函数

<template>
  <div id="app">
    <input type="text" v-model="val" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
    </ul>
  </div>
</template>

<script>
import {reactive, ref, toRefs} from 'vue'

export default {
  setup(){
    let val = ref('')
    let todos = reactive([ 
        {id:0, title:'吃饭', done:false},
        {id:1, title:'睡觉', done:false},
        {id:2, title:'lsp', done:false},
    ])
    function addTodo(){
      todos.push({
        id:todos.length,
        title:val.value,
        done:false
      })
      val.value = ''
    }
    return {val, todos, addTodo}
  }
}
</script>

查看项目vue3-app源码