学习vue第一天

创建vue项目

安装

npm install @vue/cli@5.0.4 -g

启动

npm run serve

组合式API优势

  • 在选项式API中，它将数据和逻辑进行了分离，所有不相关的数据被放置在了一起，随着应用规模的增加，项目将会变得难以维护
export default{
  setup(){
    // 属性
    // 方法
    // 计算属性
    // 数据监听
    one()
    two()
  }
}
// 功能1
function one(){
  ...
}
// 功能2
function two(){
  ...
}

组合式API入口

  • setup函数在任何生命周期之前执行，且函数内部this为undefined

  • setup函数的返回值必须是一个对象，对象的属性会被添加到组件实例对象中，

setup() {
    console.log(this);
    let name = ref("张三");
    let age = ref(18);
    function btn() {
      name.value = "李四";
      age.value = 20;
    }
    one();
    return {
      name,
      age,
      btn,
    };
  },
  • 所以他们在其他选项和模板中使用
  • 在setup函数中声明的变量不是响应式

创建响应式数据ref

  • ref方法用于创建响应式数据，即数据的变化可以引起视图的更新
使用ref()的就是响应式数据
import { ref } from "@vue/reactivity";
let name = ref('张三');
let parse = ref({name1:'张三',age:18});
return { name,parse }

创建响应式数据reactive

  • reactive方法只能创建基于引用数据类型的响应式数据
let parse = reactive({ demo: "MIHOYO", obj: "人事专员" });
{{parse.demo}}
{{parse.obj}}
function one(){
  parse.demo = '腾讯';
  parse.obj = '客服'
}

ref和reactive的区别

  • ref即可以创建基于基本数据类型的响应式数据也可以创建基于引入数据类型的响应式数据，reactive只用于创建基于引用数据类型的响应式数据
  • ref在JS中使用时需要点上value，而reactive在JS中使用时不需要点上value，在模板中使用时都不需要加value
  • ref创建的响应式数据可以被直接整体赋值，而reactive创建的响应式数据不可以，若要整体赋值需要使用遍历的方式

计算属性computed

  • 计算属性是指基于现有的状态派生出新的状态，现有状态发生变化，派生状态重新计算，在vue3中通过computed方法创建计算属性。
  • computed 接受回调函数作为参数，基于回调函数中的使用的响应式数据进行计算属性的创建，回调函数的返回值就是基于现有状态演变出的新的状态。
{{ Num}} // 10
{{ NewNum}} // 20

export default {
  setup(){
    const Num= ref(10)
    const NewNum= computed(() =>{
      Num.value*2
    })
    return { Num,NewName }
   } 
}

监听状态watch

用于监听响应式数据的变化

// 基础用法

const seach = ref("");
watch(seach, (a, b) => { 
      // 新值为a，旧值为b
      console.log(a, "a");
      console.log(b, "b");
    });
  • 监听基于ref创建的响应式数据（基本类型）
export default {
  setup(){
    const Name = ref("张三")
    watch(Name , () =>{
    console.log("监听响应式基础值")
  })
   return {Name}
  }
}
  • 监听基于ref创建的响应式数据(引用数据类型)
export default {
  setup() {
    const list = ref({name:"张三"})
    watch(list.value, () =>{
      console.log("监听响应式引用数据值")
      // 全部，只要改变都会监听，无论套多少
    })
    return {list }
  }
}
  • 监听基于ref创建的响应式数据的内部属性（基本属性）
export default {
  setup() {
    const list = ref({name:"张三"})
    watch(list.value.name, () =>{
      console.log("监听响应式引用数据内部基本属性")
    })
    return {list }
  }
}
  • 监听基于ref创建的响应式数据内部的具体属性（引用数据类型）
export default {
  setup() {
    const list = ref({ name:"李四",obj:{ job: "腾讯" }})
    watch(list.value.obj.job, () =>{
       console.log("监听ref响应式数据内部引用属性")   
    })
    return { list1 }
  }
}
  • 监听基于reactive创建的响应式数据
export default {
  setup() {
    const list = reactive({name:"张三"})
    watch(list, () =>{
      console.log("监听响应式引用数据")
    })
    return {list }
  }
}
  • 监听多个值的变化
export default {
  setup(){
    const name= ref("张三")
    const name1= reactive({job:"腾讯"})
    watch([name,name1],() =>{
      console.log(name.value)
      console.log()
      //  这里打印的都为改变的值
    })
    return{ name, name1}
  }
}
  • watch初始监听
export defalut {
  setup(){
   watch(值1,值2,{ immediate : true }) // 为true就是初始执行
  }
}

监听状态 watchEffect

  • watchEffect和watch一样，都是用于监听响应式数据的变化
  • watchEffect只关心最新值，不关心旧值是什么，而且会在初始执行一次
export default {
  setup(){
    const name = ref("张三")
    const name1 = reactive({job:"腾讯"})
    watchEffect( () =>{
      console.log(name.value)
      console.log(name1.job)
    })
  }
}