vue中的属性和方法概念讲解

Data属性和方法

在组合式API中，可以直接声明，在模板中可以直接使用

views/login/index.vue

<template>
  <div class='container'>{{ title }}</div>
  <div>{{ fun1() }}</div>
</template>

<script setup>
import { ref } from 'vue'

// 属性演示
const title = ref('登陆页面')
title.value = '--登录页面--'  // 修改属性值
// 方法演示
const fun1 = function() {
  return '该方法可直接在模板使用'
}

</script>

<style lang='scss' scoped></style>

提示

vue3.2版中，ref可以更好的代替reactive，无论是基本数据类型还是复杂数据类型都可以使用ref。
经过ref包装过后的数据就是响应式数据，在js中需要用.value访问，而在模板中可以直接访问，vue会自动转换。

vue默认为方法的this指向了组件实例，避免使用箭头函数定义方法。

计算属性

views/login/index.vue

<template>
  <div class='container'>
    <h1>登录界面</h1>
    <my-input my-value='用户名' my-key='tom' />
    <my-input my-value='密码' my-key='dkciu3' />
  </div>
</template>

<script setup>
import MyInput from './components/Input.vue'
</script>

<style lang='scss' scoped></style>

views/login/components/Input.vue

<template>
  <div>{{ newTitle }}</div>
  <div>{{ myKey }}: {{ myValue }}</div>
  <div>统计：{{ newCount }}</div>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  title: { type: String, default: '' },
  myKey: { type: String, required: true },
  myValue: { type: String, required: true }
})

// 这里是计算属性的get
const newTitle = computed(()=> `-----${props.title}-----`)

// 计算属性的get和set
const count = ref(0)
const newCount = computed({
  get: () => count.value + 100,
  set: (value) => count.value = value - 100
})

</script>

<style lang='scss' scoped></style>

类似功能对比：

• 计算属性
  • 对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性
  • 计算属性将基于它们的响应依赖关系来缓存数据，响应式依赖的数据没变就不会重新计算
• 模板内的表达式
  • 建议仅用于简单运算，放太多运算逻辑会变得难以维护
• 方法
  • 每当触发重新渲染时，调用方法将始终会再次执行函数。如果不需要计算属性缓存，可使用这个

侦听器

watch

<script setup>
import { watch } from 'vue'

// 侦听简单数据
const name = ref('apple')
watch(name, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

// 侦听对象的属性
const obj = ref({name: 'apple'})
const stop = watch(()=>obj.name, /*...*/)

// 同时侦听多个数据，其中有一个值更新了就会执行
const obj2 = ref({name: 'yellow'})
watch([()=>obj.name, ()=>obj2.name], ([newValue, newValue2],[oldValue, oldValue2])=>{
  
})

// 立即执行，变成非惰性
watch(name, (newValue, oldValue) => { console.log(newValue, oldValue) }, { immediate: true })

// 关闭侦听器
// stop()
</script>

watch特性：

• 默认是有惰性，被动，首次不会执行，内容变化才执行
• 参数可以拿到之前值和改变后值

watchEffect

<script setup>
import { watchEffect } from 'vue'
const obj = ref({name: 'apple'})
const stop = watchEffect(()=>{
  console.log(obj.name)
})

// 关闭侦听器
//stop()
</script>

watchEffect特性：

• 立即执行，没有惰性
• 自动侦听响应式依赖，不需要手动指定侦听内容
• 不能获取到之前的值

Props传值属性

从父组件接收的只读属性属性

views/login/index.vue

<template>
  <div class='container'>
    <h1>登录界面</h1>
    <my-input my-value='用户名' my-key='tom' />
    <my-input my-value='密码' my-key='dkciu3' />
  </div>
</template>

<script setup>
import MyInput from './components/Input.vue'
</script>

<style lang='scss' scoped></style>

views/login/components/Input.vue

<template>
  <div>{{ title }}</div>
  <div>{{ myKey }}: {{ myValue }}</div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  title: { type: String, default: '' },
  myKey: { type: String, required: true },
  myValue: { type: String, required: true }
})

</script>

<style lang='scss' scoped></style>

长距离的 prop

父组件可以直接传到孙组件都没问题

父组件

<script setup>
import { provide, readonly, ref } from 'vue'

const name = ref('tom')
provide('name', name)
// 上面传值是可以被孙子组件修改的，不过也最好传一个修改方法过去：
provide('changeName', (value)=>{
  name.value = value
})

// 也可以传不可修改的只读变量
provide('readonlyName', readonly(name))
</script>

孙子组件

<script setup>
import { inject } from 'vue'
const name = inject('name', '')  // ''是缺省值
const changeName = inject('changeName')

changeName('sun')
</script>

特性：

• 父组件不需要知道哪些子组件使用它
• 孙子组件不需要知道数据来自哪里