个人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><!-- 不再要求唯