vue2和vue3的todolist比较

Posted mqy1023

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2和vue3的todolist比较相关的知识,希望对你有一定的参考价值。

一、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() 函数,用来创建响应式的数据对象Observerref中我们一般存放的是基本类型数据,如果是引用类型的我们可以使用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源码

以上是关于vue2和vue3的todolist比较的主要内容,如果未能解决你的问题,请参考以下文章

vue练习 todoList

Vue项目实战——实现一个任务清单基于 Vue3.x 全家桶(简易版)

vue3 和 vue2的比较

vue3和vue2的比较

vue3与vue2的比较

vue3,对比 vue2 有什么优点?