首页 > 其他分享> 文章详细

Vue Composition API 理解

2022-04-07 21:02:31 阅读：176 来源： 互联网

标签：Vue console log value API props ref Composition name

Composition API——用户层面

Vue 框架
使用hook ->组合起来->Vue3.0 Composition API框架设计模式
e.g. watch - { watch,onMounted,computed } from 'vue‘;

{}里面的是hooks钩子,在 set up（）中使用

基本按照文档顺序，会记录一些不熟或新功能点

Composition API: setup() | Vue.js (vuejs.org)

setup()

1. .value is no need

2 return ender function() ;不使用<template>

3. set up(props)

响应式

setup(props){
        watchEffect(()=>{
            console.log(props.title);
        })
        //改变前后执行2次

        watch(()=> props.title,(newValue)=>{
             console.log(newValue);
        })
        //改变后执行1次

    }

不要解构，否则失去响应式

setup(props, ctx )

ctx 打印出

plus

reactive

1.无this

const proxy0bj = reactive({
      a: 1,
      b: 2
      });
console.log(proxy0bj);

使用响应式对象，不使用原对象

console.log( count);
const obj = ref({
   a:1,
   b:2
});
console.log(obj);

const count = ref(0);
const state = reactive({
  count
})
state.count=1;
console.log(state.count)//1

4.存放Array 或者集合对象，不会展开访问 value

Refs

export default {
    name:'Ref',
    setup(){
        const name = ref('');
        name.value='张三';
        setTimeout(()=>{
            name.value='李四'
        },2000);
    return{
        name
    }
    }

}

2.deeply reactive

3.unref 语法糖

Returns the inner value if the argument is a ref, otherwise return the argument itself. This is a sugar function for

val = isRef(val) ? val.value : val.

4.toref

The created ref is synced with its source property: mutating the source property will update the ref, and vice-versa.

标签：Vue,console,log,value,API,props,ref,Composition,name
来源： https://www.cnblogs.com/clematis/p/16114212.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue Composition API 理解

setup()

reactive

Refs