vue2和vue3的todolist比较

Posted 2022-12-06 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源码