个人vue3-学习笔记

声明：这只是我个人的学习笔记（黑马），供以后复习用 。一天学一点，随时学随时更新。明天会更好的！

这里只给代码，不给运行结果，看不出来代码的作用我也该进厂了。。。。。

Day1 使用create-vue创建项目。 

1.检查版本。

node -v

2.创建项目

npm init vue@latest

可以用这个切回国内镜像源

npm config set registry https://registry.npmmirror.com

3. 安装依赖，启动项目

npm install
npm run dev

4.1写法

原始复杂写法setup写法：必须return

<!-- 开关：写组合式组件 -->
<script>
export default {
  setup() {
    console.log('setup')
    const message = 'hello world'
    const logMessage = () => {
      console.log(message)
    }
    return {//只有return返回一个对象，对象中的属性和方法，都可以在模板中使用
      message,
      logMessage,
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
}
</script>

<template>
  <!-- 不再要求唯一的根元素 -->
  <div>
    {
  { message }}
    <button @click="logMessage">log</button>
  </div>
</template>

<style scoped></style>

简单的语法糖写法

<script setup>
const message = 'hello world'
const logMessage = () => {
  console.log(message)
}
</script>
<template>
  <!-- 不再要求唯一的根元素 -->
  <div>
    {
  { message }}
    <button @click="logMessage">log</button>
  </div>
</template>

<style scoped></style>

注：1.setup选项在beforeCreate钩子之前自动执行 

        2.setup中的this不指向组件实例了,指向undefined

4.2 函数调用返回响应式数据

reactive()接受对象类型数据的参数传入并返回一个响应式的对象

<script setup>
// 1.导入函数
import { reactive } from 'vue'
//  2.执行函数 传入一个对象类型的函数 变量接受
const state = reactive({
  count: 0
})
const setCount = () => {
  state.count++
}
</script>
<template>
  <!-- 不再要求唯一的根元素 -->
  <div>
    <button @click='setCount'>
      {
  { state.count }}
    </button>
  </div>
</template>

<style scoped></style>

ref()接受简单类型或对象类型数据的参数传入并返回一个响应式的对象 

脚本区域修改ref的响应式数据 必须通过value属性

<script setup>
// // 1.导入函数
// import { reactive } from 'vue'
// //  2.执行函数 传入一个对象类型的函数 变量接受
// const state = reactive({
//   count: 0
// })
// const setCount = () => {
//   state.count++
// }

//1.导入ref 函数
import { ref } from 'vue'
//2.执行函数 传入一个简单类型或者对象类型的参数 变量接受
const count = ref(0)
console.log(count)

const setCount = () => {
  //脚本区域修改ref的响应式数据 必须通过value属性
  count.value++
}
</script>
<template>
  <!-- 不再要求唯一的根元素 -->
  <div>
    <button @click='setCount'>
      {
  { count }}
    </button>
  </div>
</template>

<style scoped></style>

4.3计算属性函数 

computed 返回计算后的数据（不应该有副作用）

<script setup>
// 1.导入computed
import { computed } from 'vue'
import { ref } from 'vue'
const list = ref([1, 2, 3, 4, 5, 6, 7, 8])

// 2.使用computed return计算后的值 变量接受
const computedList = computed(() => {
  return list.value.filter(item => item > 2)
})

setTimeout(() => {
  list.value.push(9, 10)
}, 3000);
</script>
<template>
  <!-- 不再要求唯一的根元素 -->
  <div>
    原始响应式数据-{
  { list }}
  </div>
  <div>
    计算后的响应式数据-{
  { computedList }}
  </div>
</template>

<style scoped></style>

 4.4watch函数 

侦听一个或多个数据的变化，数据变化时执行回调函数（参数：immediate(立即执行)，deep(深度侦听)）

<script setup>
// import {ref,watch} from 'vue'
// const count = ref(0)
// const setCount = () => {
//   count.value++
// }
// //调用watch方法，监听count的变化
// //watch 里面ref对象不需要加.value属性
// watch(count, (newValue, oldValue) => {
//   console.log(`count发生了变化，老值是${oldValue}，新值是${newValue}`);
// })

import { ref, watch } from 'vue'
const count = ref(0)
const changeCount = () => {
  count.value++
}
const name = ref('cp')
const changeName = () => {
  name.value = 'pc'
}

watch(
  [count,name], 
  (
    [newValue,newName], [oldValue,oldName]
  ) => {
  console.log(`count或者name发生了变化，老值是${[oldValue,oldName]}，新值是${[newValue,newName]}`);
})
</script>
<template>
  <!-- 不再要求唯