【Vue】- Vue表达式

知识回顾

前言

Vue项目介绍

源码分析

1. 项目结构介绍（单页面应用程序）

VUE-DEMO
│─node_modules	          第三包文件夹
├─public                	放html文件的地方
| └─favicon.ico 	      	网站图标
├─src 			              源代码目录 → 以后写代码的文件夹
│  └─assets 	           	静态资源目录 → 存放图片、字体等
│  └─components         	组件目录 → 存放通用组件
│  └─App.vue   		        App根组件 → 项目运行看到的内容就在这里编写  
│  └─main.ts   		        入口文件 → 打包或运行，第一个执行的文件 
└─.eslintrc.cjs     	  	eslint配置文件
└─.gitignore     	      	git忽视文件
└─.prettierrc.json     		prettierrc配置文件
└─env.d.ts     		        ts代码智能提示使用
└─index.html          		index.html 模板文件
└─package.json		        项目配置文件 → 包含项目名、版本号、scripts、依赖包等
└─pnpm-lock.yaml 	      	pnpm锁文件，由pnpm自动生成的，锁定安装版本
└─README.md 	          	项目说明文档
└─tsconfig.app.json     	ts项目配置文件
└─tsconfig.json 	      	ts配置文件
└─tsconfig.app.json     	ts的node环境配置文件
└─vite.config.js 		      create-vue配置文件

2. 项目运行流程图(单页面应用程序)

项目运行后执行main.ts
main.ts中会执行app.vue文件，导入createapp方法，导入app.vue , 创建app实例对象
最后渲染到index.html容器中

3. 选项式和组合式api

• 选项式

<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="./assets/logo.png" />
  <hr />
  计数器：{{ count }} <button @click="increment">累加</button>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      count: 0
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    },
    increment() {
      this.count++
    }
  }
}
</script>

• 组合式

<template>
  <button @click="toggle">显示隐藏图片</button>
  <img v-show="show" alt="Vue logo" src="./assets/logo.svg" />
  <hr />
  计数器：{{ count }} <button @click="increment">累加</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const show = ref(true)
const toggle = () => {
  show.value = !show.value
}
const count = ref(0)
const increment = () => {
  count.value++
}
</script>

4. 插值表达式 {{}} 胡子语法

插值表达式是一种Vue的模板语法, 我们可以用插值表达式渲染出Vue提供的数据

• 作用：利用表达式进行插值，渲染到页面中
• 表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果

注意事项：

1. 在插值表达式中使用的数据 必须在setup函数中进行了提供
2. 支持的是表达式，而非语句，比如：if for …
3. 不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)

<template>
  <div>{{ title }}</div>
  <div>{{ sum(100, 200) }}</div>
  <p>{{ array[1] }}</p>
</template>

<script setup lang="ts">
const title = 'test'
const sum = (num1: number, num2: number) => {
  return num1 + num2
}
const array = [1, 2, 3]
</script>

5. reactive函数

<template>
  <button @click="onClick">点击我</button>
  <button @click="addAge">增加年龄</button>
  <button @click="addHobbies">新增爱好</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const person = reactive({
  name: '张三',
  age: 18,
  friend: {
    name: '李四',
    age: 20,
    hobbies: ['打游戏', '看电影']
  }
})
const onClick = () => {
  console.log('点击了')
  alert('点击了我')
}
const addAge = () => {
  person.age++
  console.log(person.age)
}
const addHobbies = () => {
  person.friend.hobbies.push('看书')
  console.log(person.friend.hobbies)
}
</script>

6. ref表达式

<template>
  <div>年龄{{ age }}</div>
  <button @click="changeAge">修改年龄</button>
  <div>{{ person }}</div>
  <button @click="changePersonAge">修改person中年龄</button>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

const age = ref(18)
const changeAge = () => {
  age.value++
}
const person = ref({ name: '张三', age: 18 })
const changePersonAge = () => {
  person.value.age++
}
</script>

拓展知识

reactive和ref的选择

1. 开始分析
   ● reactive 可以转换对象成为响应式数据对象，但是不支持简单数据类型。
   ● ref 可以转换简单数据类型为响应式数据对象，也支持复杂数据类型，但是操作的时候需要 .value 。
   ● 它们各有特点，现在也没有最佳实践，没有明显的界限，所有大家可以自由选择。
2. 推荐用法
   ● 如果能确定数据是对象且字段名称也确定，可使用 reactive 转成响应式数据，其他一概使用 ref 。这样就没有心智负担 。

总结