了解有哪些新的特性 了解compositionAPI

emmmm,想直接调试的大兄得们可以 https://github.com/Janenil/vue3.0-test
克隆下来，安装一下依赖就可以直接上手调试了

// 新的写法
<!DOCTYPE html>
<html lang="en">
<body>
  <div id='app'></div>
</body>
<script src="./dist/vue.global.js"></script>
<script>
const { createApp, reactive, computed } = Vue;

const RootComponent = {
  template: `
    <button @click="increment">
      Count is: {{ state.count }}
    </button>
  `,
  setup() {
    const state = reactive({
      count: 0,
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}

createApp().mount(RootComponent, '#app')
</script>
</html>

  1. 生命周期

    import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

    这些生命周期挂钩注册功能只能在期间同步使用setup()，因为它们依赖于内部全局状态来定位当前活动实例（当前setup()正在被调用的组件实例）。在没有当前活动实例的情况下调用它们将导致错误。

    1. 每次数据更新都会触发 onUpdate和onBeforeUpdate
    • beforeCreate ->使用 setup()
    • created ->使用 setup()
    • beforeMount -> onBeforeMount
    • mounted -> onMounted
    • beforeUpdate -> onBeforeUpdate
    • updated -> onUpdated
    • beforeDestroy -> onBeforeUnmount
    • destroyed -> onUnmounted
    • errorCaptured -> onErrorCaptured

    新增

    • onRenderTracked
    • onRenderTriggered

  2. setup

setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

  • 处于生命周期的哪一块：beforeCreate 之后，create之前
  • 参数props，context：setup中无法访问this

  1. reactiveAPI

    等价于 vue 2.x 中的 Vue.observable() 函数，但是为了命名不重复，另外命名为reactive，用来创建响应式的对象

    const data = reactive({
      a:'test reactive',
      b:{
        c: 123
      }
    })

  2. Ref API

    根据给定的值来创建响应式的数据对象，返回的是一个对象

     const test = ref('test ref')
 console.log(test) // { value:'test ref' } 
 console.log(test.value) // 'test ref'

     const data = reactive({
      a:'test reactive',
      b:{
        c: 123
      },
      d: test
    })
 console.log(data.d) // test reactive

    将ref数据包裹在reactive里面，reactive会自动为其解构，访问时无需通过.value获取数据

  3. isRef

    判断某个值是否为ref类型

    const unwrapped = isRef(test) ? test.value : test

  4. toRefs

    toRefs将reactive的创建出来的响应式对象转化为普通对象，每个属性节点都是ref类型的。

    不是很明白这个API的意义是什么。

    将普通对象传入toRefs，并不会变成响应式

        const testnormalObj = toRefs({aa:0,bb:'b'})
    const test = ref('test ref')
    const data = reactive({
      a:'test reactive',
      b:{
        c: 123
      },
      d: test
    })
     console.log('reactive',data)
     console.log('torefs reactive',toRefs(data))
     console.log('torefs testnormalObj',toRefs(testnormalObj))

在这里插入图片描述

  1. computed

    创建计算属性，computed函数返回的是一个ref实例

    // 只读的计算属性
const data_b_c = computed(() => {
  return data.b.c + 100;
})

 // 创建一个 可读可写computed 计算属性
    const plusOne = computed({
      // 取值函数
      get: () => data.b.c + 250,
      // 赋值函数
      set: val => {
        data.b.c += val
      }
    })

  2. Watch

    监视某些数据变化，触发一些操作,

    watch(() => console.log(data.b.c))
// 监听 ref类型数据
watch(test, (val, oldV)=> {
  console.log('watch ref',val, oldV)
})
// 监听多个ref类型
watch(
  [test, name], // 需要被监视的多个 ref 数据源
  ([count, name], [prevCount, prevName]) => {
    console.log(count)
    console.log(name)
    console.log(prevCount)
    console.log(prevName)
  },
  {
    lazy: true // 在 watch 被创建的时候，不执行回调函数中的代码
  }
)
// 监听reactive数据
watch(() => data.a, (val, oldV)=> {
  console.log('watch reactive',val, oldV)
})

// 创建监视，并得到 停止函数
const stop = watch(() => { /* ... */ })
// 调用停止函数，清除对应的监视
stop()

  3. effect
    监听响应式数据，数据更新，触发effect

  effect(() => {
  	console.log('count改变', data.b.c);
  })

  1. refs

    可以通过ref（）引用页面的元素

    <template>
  <div>
    <div ref="refDiv">TemplateRefOne{{a}}</div>
    <p ref="test-ref">{{test}}</p>
  </div>
</template>
<script>
import { 
  ref, 
  onMounted, 
 } from '@vue/composition-api'
export default {
  setup(props, context) {
    // 创建一个 DOM 引用
    const refDiv = ref(null)
   
    // 在 DOM 首次加载完毕之后，才能获取到元素的引用
    onMounted(() => {
      console.log('onMount!', context)
      // refDiv.value 是原生DOM对象
      refDiv.value.style.fontSize = 40 + 'px'
      context.refs['test-ref'].style.color = 'red'
    })
    
    // 把创建的引用 return 出去
    return {
      refDiv,
    }
  }
}
</script>

    在这里插入图片描述
    在这里插入图片描述

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区