个人vue3-学习条记

声明：这只是我个人的学习条记（黑马），供以后复习用 。一天学一点，随时学随时更新。明天会更好的！
这里只给代码，不给运行效果，看不出来代码的作用我也该进厂了。。。。。
Day1 使用create-vue创建项目。

1.检查版本。

1. node -v

复制代码

2.创建项目

1. npm init vue@latest

复制代码

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

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

复制代码

3. 安装依靠，启动项目

1. npm install
2. npm run dev

复制代码

4.1写法

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

1. <!-- 开关：写组合式组件 -->
2. <script>
3. export default {
4.   setup() {
5.     console.log('setup')
6.     const message = 'hello world'
7.     const logMessage = () => {
8.       console.log(message)
9.     }
10.     return {//只有return返回一个对象，对象中的属性和方法，都可以在模板中使用
11.       message,
12.       logMessage,
13.     }
14.   },
15.   beforeCreate() {
16.     console.log('beforeCreate')
17.   },
18. }
19. </script>
21. <template>
22.   <!-- 不再要求唯一的根元素 -->
23.   <div>
24.     {
25.   { message }}
26.     <button @click="logMessage">log</button>
27.   </div>
28. </template>
30. <style scoped></style>

复制代码

简单的语法糖写法

1. <script setup>
2. const message = 'hello world'
3. const logMessage = () => {
4.   console.log(message)
5. }
6. </script>
7. <template>
8.   <!-- 不再要求唯一的根元素 -->
9.   <div>
10.     {
11.   { message }}
12.     <button @click="logMessage">log</button>
13.   </div>
14. </template>
16. <style scoped></style>

复制代码

注：1.setup选项在beforeCreate钩子之前自动实行
         2.setup中的this不指向组件实例了,指向undefined

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

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

1. <script setup>
2. // 1.导入函数
3. import { reactive } from 'vue'
4. //  2.执行函数 传入一个对象类型的函数 变量接受
5. const state = reactive({
6.   count: 0
7. })
8. const setCount = () => {
9.   state.count++
10. }
11. </script>
12. <template>
13.   <!-- 不再要求唯一的根元素 -->
14.   <div>
15.     <button @click='setCount'>
16.       {
17.   { state.count }}
18.     </button>
19.   </div>
20. </template>
22. <style scoped></style>

复制代码

ref()接受简单范例或对象范例数据的参数传入并返回一个响应式的对象
脚当地区修改ref的响应式数据 必须通过value属性

1. <script setup>
2. // // 1.导入函数
3. // import { reactive } from 'vue'
4. // //  2.执行函数 传入一个对象类型的函数 变量接受
5. // const state = reactive({
6. //   count: 0
7. // })
8. // const setCount = () => {
9. //   state.count++
10. // }
12. //1.导入ref 函数
13. import { ref } from 'vue'
14. //2.执行函数 传入一个简单类型或者对象类型的参数 变量接受
15. const count = ref(0)
16. console.log(count)
18. const setCount = () => {
19.   //脚本区域修改ref的响应式数据 必须通过value属性
20.   count.value++
21. }
22. </script>
23. <template>
24.   <!-- 不再要求唯一的根元素 -->
25.   <div>
26.     <button @click='setCount'>
27.       {
28.   { count }}
29.     </button>
30.   </div>
31. </template>
33. <style scoped></style>

复制代码

4.3计算属性函数

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

1. <script setup>
2. // 1.导入computed
3. import { computed } from 'vue'
4. import { ref } from 'vue'
5. const list = ref([1, 2, 3, 4, 5, 6, 7, 8])
7. // 2.使用computed return计算后的值 变量接受
8. const computedList = computed(() => {
9.   return list.value.filter(item => item > 2)
10. })
12. setTimeout(() => {
13.   list.value.push(9, 10)
14. }, 3000);
15. </script>
16. <template>
17.   <!-- 不再要求唯一的根元素 -->
18.   <div>
19.     原始响应式数据-{
20.   { list }}
21.   </div>
22.   <div>
23.     计算后的响应式数据-{
24.   { computedList }}
25.   </div>
26. </template>
28. <style scoped></style>

复制代码

4.4watch函数

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

1. <script setup>
2. // import {ref,watch} from 'vue'
3. // const count = ref(0)
4. // const setCount = () => {
5. //   count.value++
6. // }
7. // //调用watch方法，监听count的变化
8. // //watch 里面ref对象不需要加.value属性
9. // watch(count, (newValue, oldValue) => {
10. //   console.log(`count发生了变化，老值是${oldValue}，新值是${newValue}`);
11. // })
13. import { ref, watch } from 'vue'
14. const count = ref(0)
15. const changeCount = () => {
16.   count.value++
17. }
18. const name = ref('cp')
19. const changeName = () => {
20.   name.value = 'pc'
21. }
23. watch(
24.   [count,name],
25.   (
26.     [newValue,newName], [oldValue,oldName]
27.   ) => {
28.   console.log(`count或者name发生了变化，老值是${[oldValue,oldName]}，新值是${[newValue,newName]}`);
29. })
30. </script>
31. <template>
32.   <!-- 不再要求唯

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。