由于vue3.x还没有正式发布,所以可以通过安装包vue-function-api提前尝试

npm install vue-function-api  --save

main.js

import Vue from 'vue'
import { plugin } from 'vue-function-api' Vue.use(plugin)

test.vue

<template>
<div>
<span>{{msg}}</span><br>
<span>计算属性值:{{computedValue}}</span><br> <el-button @click="appendName">点击</el-button>
</div>
</template>
<script>
import { value, computed, watch, onMounted, onUpdated, onUnmounted } from 'vue-function-api'
export default {
props: {
name: {
type: String
}
},
setup (props, context) {
/* eslint-disable no-alert, no-console */
const msg = value(2)
const msg2 = value(3)
console.log(context)
const appendName = () => {
msg.value += 1
msg2.value -= 2
} const computedValue = computed(() => msg.value * 2) watch([msg2, () => msg.value * 3], ([a, b]) => {
console.log(`a is: ${a}`)
console.log(`b is: ${b}`)
}) onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
/* eslint-disable no-alert, no-console */
return {
msg,
appendName,
computedValue
}
}
}
</script>

参考链接:

https://github.com/vuejs/vue-function-api/blob/master/README.zh-CN.md

https://zhuanlan.zhihu.com/p/68477600

vue3 RFC初尝试的更多相关文章

  1. vue3.0初尝试

  2. R语言爬虫初尝试-基于RVEST包学习

    注意:这文章是2月份写的,拉勾网早改版了,代码已经失效了,大家意思意思就好,主要看代码的使用方法吧.. 最近一直在用且有维护的另一个爬虫是KINDLE 特价书爬虫,blog地址见此: http://w ...

  3. SQLSERVER2012里的扩展事件初尝试(下)

    SQLSERVER2012里的扩展事件初尝试(下) SQLSERVER2012里的扩展事件初尝试(上) 我们继续文章扩展事件在Denali CTP3里的新UI(二)里的这个实验 脚本文件下载:http ...

  4. SQLSERVER2012里的扩展事件初尝试(上)

    SQLSERVER2012里的扩展事件初尝试(上) SQLSERVER2012里的扩展事件初尝试(下) 周未看了这两篇文章: 扩展事件在Denali CTP3里的新UI(一) 扩展事件在Denali ...

  5. codefirst初尝试

    Code First 约定 借助 CodeFirst,可通过使用 C# 或Visual Basic .NET 类来描述模型.模型的基本形状可通过约定来检测.约定是规则集,用于在使用 Code Firs ...

  6. 中文编程语言之Z语言初尝试: ZLOGO 4

    原文: https://zhuanlan.zhihu.com/p/31505895. 作者为本人. @TKT2016 开发的Z语言(ZLOGO是它的一个部分)是本人至今看到的唯一一个仍活跃开发的开源且 ...

  7. 2017-12-24 手机编程环境初尝试-用AIDE开发Android应用

    前不久才接触到纯粹用手机进行编程的开发者, 当时颇有孤陋寡闻之感, 因为之前听说过手机编程还是一些在线编程学习网站开发的学习环境, 没有想过真的有用它做实际开发的. 此文用AIDE免费版在自己的手机上 ...

  8. 2017-11-28 中文编程语言之Z语言初尝试: ZLOGO 4

    "中文编程"知乎专栏原文. 作者为本人. @TKT2016 开发的Z语言(ZLOGO是它的一个部分)是本人至今看到的唯一一个仍活跃开发的开源且比较完整的中文编程语言项目. 它的源码 ...

  9. 不安分的android开发者(小程序初尝试,前后台都自己做)

    前言 作为一个稍微有点想法的程序员来说,拥有一个自己开发,自己运营,完全属于自己的应用,应该是很多人的梦想.刚毕业那会,自己的工作是做游戏,于是也和朋友业余时间开发一些小游戏玩玩,可是终究不成气候,而 ...

随机推荐

  1. Git设定不合并的文件

    一个最简单的做法,通过添加.gitattributes文件来完成 1 在要被合并的分支中设置 git config --global merge.ours.driver true设置git配置项mer ...

  2. Java开发笔记(一百二十)AWT文本标签

    前面介绍了AWT窗口及其面板的简单用法,其中展示出来的控件只有按钮一种,还有很多好用好玩的控件有待介绍.首先是文本标签Label,该控件用于显示一段平铺文本,它不花哨也不跳动,完全就是素面朝天的文本字 ...

  3. SQL——BETWEEN操作符

    一.BETWEEN操作符的基本用法 BETWEEN操作符用于选取两个值范围内的值. 语法格式如下: SELECT 列名1,列名2... FROM 表名 WHERE 列名 BETWEEN 值1 AND ...

  4. Python知识点图片

  5. AS3.0频谱-01

    AS3.0频谱系列-01: package fengzi.spectrum { //import fengzi.colors.GetColor; import flash.display.Sprite ...

  6. mysql_新建表:主键、外键等

    序号 命令(中文) 命令(英文呢) 解释 示例 备注 1 主键约束 primary key 不能重复,不能为空 学号 2 外键约束 foreign key 可以重复,依赖主键 学号 3 非空约束 no ...

  7. idea多级目录不展开的问题

    遇见了一个坑,idea新建的包,和它的上级包重叠在了一起,无法形成树状结构 原因呢,还是因为自己的不细心了,解决方案很简单,下面的是原情况 解决方案,点击左侧栏右上角的设置图表,注意看红框内 把第一行 ...

  8. Python之TensorFlow的变量收集、自定义命令参数、矩阵运算、梯度下降-4

    一.TensorFlow为什么要存在变量收集的过程,主要目的就是把训练过程中的数据,比如loss.权重.偏置等数据通过图形展示的方式呈现在开发者的眼前. 自定义参数:自定义参数,主要是通过Python ...

  9. vue 自定义image组件

    介绍 1:当图片加载失败时,给出错误提示. 2:当图片加载中时,给出加载提示. 3:图片处理模式:等比缩放/裁剪/填充/... 1.图片加载状态处理 通过给图片绑定load事件与error事件处理函数 ...

  10. title 有背景边框自适应 mobile

    固定宽度,固定高度,来写背景的高度.这样就能居中.