Vue3小兔鲜：组合式写法入门1

<script>
export default {
  data(){
    return {
      count:0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const addCount = ()=> count.value++
</script>

npm init vue@latest

<script>
  export default {
    setup(){
    },
    beforeCreate(){
    }
  }
</script>

<script>
  export default {
    setup(){
      const message = 'this is message'
      const logMessage = ()=>{
        console.log(message)
      }
      // 必须return才可以
      return {
        message,
        logMessage
      }
    }
  }
</script>

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>

<template>
  <div>
    {{ message }}
    <button @click="logMessage">log</button>
  </div>
</template>
<script setup>
//采用setup方式：省略export default 与 return
  const message = 'this is message'
  const logMessage = () => {
    console.log(message);
  }
</script>
<style>
</style>

<script setup>
// 导入
import {reactive} from 'vue'
// 执行函数 传入参数 变量接收
const state = reactive(对象类型数据)
</script>

<script setup>
  // 导入
  import { reactive } from 'vue' 
  // 执行函数 传入参数 变量接收
  const state = reactive({ //
    msg:'this is msg' //这里传入一个常规的对象
  })//通过reactive()会返回给state一个响应式对象
  const setState = ()=>{
    // 修改数据更新视图
    state.msg = 'this is new msg'
  }
</script>
<template>
  <p>{{ state.msg }}</p>
  <button @click="setState">change msg</button>
</template>

<script setup>
// 导入
import { ref } from 'vue'
// 执行函数 传入参数 变量接收
const state = reactive(简单类型或者复杂类型数据)
</script>

<script setup>
 // 导入
 import { ref } from 'vue'
 // 执行函数 传入参数 变量接收
 const count = ref(0)
 const setCount = ()=>{
   // 修改数据更新视图必须加上.value
   count.value++
 } 
</script>
<template>
  <button @click="setCount">{{count}}</button>
</template>

<script setup>
  // 导入
  import {ref, computed } from 'vue'
  // 计算属性 变量接收 在回调参数中return计算值
  const computedList = computed(() => {
      return 基于响应式数据做计算之后的值
  })
</script>

<template>
  <div>
    原始响应式数组 - {{ list }}
  </div>
  <div>
    计算属性数组 - {{ computedList }}
  </div>
</template>
<script setup>
  // 原始响应式数组
  import { ref } from 'vue'
  // 1. 导入computed
  import { computed } from 'vue'
  const list = ref([1, 2, 3, 4, 5, 6, 7, 8])
  // 2. 执行函数
  const computedList = computed(() => {
    return list.value.filter(item =>  item > 2)
  })
</script>

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  })
</script>

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('cp')
  // 2. 调用watch 侦听变化
  watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
    console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
  })
</script>

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  },{
    immediate: true
  })
</script>

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state
  watch(state, ()=>{
    console.log('数据变化了')
  })
  const changeStateByCount = ()=>{
    // 直接修改不会引发回调执行
    state.value.count++
  } 
</script>
<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>

<template>
  <div>
    <p>当前name -- {{ state.name }}</p>
    <p>当前age -- {{ state.age }}</p>
    <hr/>
    <button @click="changeName">CName</button>
    <button @click="changeAge">CAge</button>
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue'
  const state = ref({
    name: 'cp',
    age: 18,
  })
  const changeName = () => {
    state.value.name = "test"
  }
  const changeAge = () => {
    state.value.age = 20
  }
  watch(
    () => state.value.age, //要侦听谁就把谁写过来
    () => console.log('age发生变化了') //数据变化时要执行的回调
  )
</script>