老牛源码
老牛源码

【Vue2+3入门到实战】（22）VUE3之组合式API - setup、reactive和ref函数、computed、watch、生命周期函数详细讲解

目录

  • 一、组合式API - setup选项
    • 1. setup选项的写法和执行时机
    • 2. setup中写代码的特点
    • 3.

      执行时机

      在beforeCreate钩子之前执行

      【Vue2+3入门到实战】（22）VUE3之组合式API - setup、reactive和ref函数、computed、watch、生命周期函数详细讲解_第1张图片

      2. setup中写代码的特点

      在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用

      3.

      script标签添加 setup标记，不需要再写导出语句，默认会添加导出语句

      二、组合式API - reactive和ref函数

      1. reactive

      接受对象类型数据的参数传入并返回一个响应式的对象

      2. ref

      接收简单类型或者对象类型的数据传入并返回一个响应式的对象

      3. reactive 对比 ref

      1. 都是用来生成响应式数据
      2. 不同点
        1. reactive不能处理简单类型的数据
        2. ref参数类型支持更好，但是必须通过.value做访问修改
        3. ref函数内部的实现依赖于reactive函数
      3. 在实际工作中的推荐
        1. 推荐使用ref函数，减少记忆负担，小兔鲜项目都使用ref

      三、组合式API - computed

      计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法

      四、组合式API - watch

      侦听一个或者多个数据的变化，数据变化时执行回调函数，俩个额外参数 immediate控制立刻执行，deep开启深度侦听

      1. 侦听单个数据

      2. 侦听多个数据

      侦听多个数据，第一个参数可以改写成数组的写法

      3. immediate

      在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调

      4. deep

      通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep

      五、组合式API - 生命周期函数

      1. 选项式对比组合式

      2. 生命周期函数基本使用

      1. 导入生命周期函数
      2. 执行生命周期函数，传入回调
      
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})

      3. 执行多次

      生命周期函数执行多次的时候，会按照顺序依次执行

      
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})

onMounted(()=>{
  // 自定义逻辑
})

      六、总结

      组合式API是Vue3中的新特性，它允许我们以更灵活和可组合的方式编写组件逻辑。

      1. setup函数：setup函数是组合式API的入口，它在组件实例创建之前调用。我们可以在setup函数中执行一些初始化逻辑，并返回一个对象，这个对象将会成为组件实例的属性。setup函数接收两个参数：props和context，props是组件的属性，context提供了一些常用的API，例如emit用于派发事件。

      2. reactive和ref函数：reactive函数接收一个普通对象，并返回一个响应式代理对象。ref函数接收一个普通值，并返回一个响应式引用对象。我们可以使用reactive和ref函数来创建响应式数据。响应式数据可以在模板中使用，并能够自动追踪其依赖。

      3. computed函数：computed函数接收一个getter函数，并返回一个计算属性。计算属性是一个响应式对象，它会自动追踪其依赖，并在依赖发生变化时重新计算。我们可以使用computed函数来处理一些复杂的数据逻辑，例如对多个响应式数据进行运算得到一个新的值。

      4. watch函数：watch函数用于监听一个响应式数据的变化，并在数据变化时执行一些副作用。watch函数接收两个参数：要监听的响应式数据和回调函数。我们可以使用watch函数来处理一些异步操作，例如发送网络请求或保存数据。

      5. 生命周期函数：Vue3中的生命周期函数经过了一些改变。setup函数中可以使用onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等函数来代替Vue2中的生命周期钩子函数。这些函数分别在组件挂载前、挂载后、更新前、更新后、卸载前和卸载后调用。我们可以在这些函数中执行一些与组件生命周期相关的操作，例如请求数据、添加事件监听器等。

      综上所述，Vue3的组合式API提供了更灵活和可组合的方式来编写组件逻辑，使我们能够更好地组织和重用代码。它使用了一些新的函数和概念，例如setup函数、reactive和ref函数、computed函数、watch函数以及新的生命周期函数。通过学习和掌握这些API，我们可以更高效地开发Vue3应用。

你可能感兴趣的:(VUE教程,vue.js,javascript,前端)

  • 用AI提升电商平台的客户体验：从个性化推荐到智能客服 Echo_Wish 人工智能前沿技术人工智能
    用AI提升电商平台的客户体验：从个性化推荐到智能客服随着电商行业的竞争日益激烈，如何在海量商品中脱颖而出，吸引和保持客户的关注，成为平台生存和发展的关键。而在这场竞争中，人工智能（AI）正在发挥着越来越重要的作用。AI不仅可以优化电商平台的后台操作，还能在前端提供更为个性化、智能化的客户体验，让消费者感受到前所未有的便捷与高效。本文将从个性化推荐、智能客服、智能搜索等方面，详细探讨如何通过AI技术
  • HTML、Vue和PHP文件的区别与联系 生信天地 htmlvue.jsphp
    一、核心区别类型性质执行环境功能特点.html静态标记语言浏览器直接解析定义页面结构和内容，无逻辑处理能力.vue前端框架组件文件浏览器/构建工具整合HTML模板+JS逻辑+CSS样式，支持动态数据绑定和组件化开发.php服务器端脚本语言文件Web服务器执行动态生成HTML内容，支持数据库操作和业务逻辑处理二、联系与协作PHP与HTMLPHP文件通过标签嵌入HTML，服务器执行PHP代码后输出纯H
  • Ajax基础学习 喜欢代码的新之助 ajax学习okhttp
    AJAX浏览器本身就具备网络通信的能力，但在早期浏览器并没有把这个能力开放给JS最早是微软在IE浏览器中把这一能力向JS开放，让JS可以在代码中实现发送请求，这项技术在2005年被正式命名为AJAX（AsynchronousJavascriptAndXML）这套API主要依靠一个构造函数完成；该构造函数的名称为XMLHttpRequest，简称为XHR由于XHRAPI有着诸多缺陷，在HTML5和E
  • 阿里云视频点播，基于thinkphp8上传视频 quweiie php阿里云音视频云计算
    前端参考官方示例(jQuery版)阿里云JavaScript上传SDKDemo(使用jquery).container{width:1200px;margin:0auto;}.input-control{margin:5px0;}.input-controllabel{font-size:14px;color:#333;width:30%;text-align:right;display:inli
  • 从零开始：Django + MySQL + Vue 打造在线Demo下载平台 阮懿同
    从零开始：Django+MySQL+Vue打造在线Demo下载平台【下载地址】DjangoMySQLVue从零开始打造在线Demo下载平台Django+MySQL+Vue从零开始打造在线Demo下载平台本仓库提供了一套完整的前后端实战项目源码，带你全面学习和掌握在Django后端框架和Vue前端框架下，如何协作开发并部署一个功能完备的在线Demo下载网站项目地址:https://gitcode.c
  • 网络安全组织架构表 网络安全技术架构 网络安全King web安全架构安全
    web安全架构（上）开始之前这们说一下，web网站其实防御也相当重要，不管是服务器防御，后台数据防御，数据库防御都是必须滴，那我们说说常见的几种。后续再给大家分享api接口安全性设计，黑名单白名单，以及防御DDOS。XSS攻击，SQL注入，防盗链，csrf模拟请求，文件上传漏洞，忘记密码漏洞，Api接口幂等，其他问题等等，，，，，，一，什么是XSS?Xss就是javascript脚本攻击，就是在表
  • 什么是重绘？什么是回流？如何减少回流？ Ashy- 前端面试题前端笔记css3
    重绘是指当元素样式发生改变，但不影响其布局的情况下，浏览器重新绘制元素的过程。例如修改元素的背景色、字体颜色等回流是指元素布局属性发生改变，需要重新计算元素在页面中的布局位置时，浏览器重新进行布局的过程例如元素的宽度高度位置改变如何减少回流？适用css动画代替JavaScript动画css动画利用GPU加速，在性能方面通常比JavaScript动画更高效。使用css的transform和opaci
  • 干货：DeepSeek+SpringAI实现流式对话！ 液态不合群 deepseek
    前面一篇文章我们实现了《炸裂：SpringAI内置DeepSeek啦！》，但是大模型的响应速度通常是很慢的，为了避免用户用户能够耐心等待输出的结果，我们通常会使用流式输出一点点将结果输出给用户。那么问题来了，想要实现流式结果输出，后端和前端要如何配合？后端要使用什么技术实现流式输出呢？接下来本文给出具体的实现代码，先看最终实现效果：解决方案在SpringBoot中实现流式输出可以使用Sse（Ser
  • Node.js 环境搭建指南（手动下载并安装Node.js） MAX_WT node.js服务器javascript
    在服务器上部署Node.js环境是开发全栈应用、运行JavaScript服务端代码的基础步骤。本文将详细介绍如何在Linux服务器上搭建Node.js环境，并验证其是否正常运行。本文适合初学者和有一定经验的开发者参考。一、服务器环境准备1.添加GitHubHosts由于某些网络环境下访问GitHub可能较慢或不稳定，我们可以通过修改/etc/hosts文件来加速访问。操作步骤：1.使用vi编辑器打
  • JavaScript 简介 强强学习 javascript开发语言ecmascript
    JavaScript是互联网上最流行的脚本语言，这门语言可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript是脚本语言JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后，可由所有的现代浏览器执行。JavaScript很容易学习。
  • html元素后追加内容,jquery 元素控制(追加元素/追加内容)介绍及应用 王大明白 html元素后追加内容
    一、在元素内部/外部追加元素append,prepend:添加到子元素before，after：作为兄弟元素添加html：在我的后面追加一条新闻Javascript:jQuery(function(){//在元素内部追加内容$("#content").append("姚明退役了...");})在#content里面添加元素，这是把姚明退役了...作为子元素添加到#content，如果想在元素外部追
  • html如何使多张图片滑动不卡顿,Web端大量图片同时加载卡顿问题的优化方案 kisserkook
    案例由于业务的需要，需求方需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，可能会遇到很多的坑，这里小编也总结了一些优化方案，我们可以一起来看看。具体场景在描述如何解决问题，我们现在先来申明，问题是什么？需求的主要内容是在某个页面显示1~1000张，200~500k大小的图。好消息是这些图片来源于本地硬盘而非网络。(否则这个问题就要变成优化网络....)踩坑历程由于不是纯前端的项目，笔者
  • canvas 添加html元素,给canvas添加内容 云舞空城 canvas添加html元素
    画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向HTML5页面添加canvas元素。规定元素的id、宽度和高度：通过JavaScript来绘制canvas元素本身是没有canvas画布与画布内容都缩小如何实现?如何将canvas复制给另外一个canvascanvas怎么根据坐标获取上面的内容html5canvas清除
  • 计算机学习建议 qincjun 学习
    对于现代得计算机开发者而言；最快的是要见到成效；这是一个功利性的社会；对于99%的人来说，先保证自己可以在社会上活下去才是最重要的；而不是追求梦想；一、职业Web前端：HTML、CSS、JavaScript、Vue3框架、React框架等；客户端：C#后端：(C语言、C++)或者Java数据库：MySQL之类的数据库操作；算法工程师：算法相关书籍；架构师：Linux相关；并做过前后端请一定要想好去
  • RK3588+昇腾AI｜40TOPS算力AI盒子设计方案 ARM+FPGA+AI工业主板定制专家 AI盒子瑞芯微人工智能
    综合视频智能AI分析系统介绍以计算机视觉技术为基础，AI赋能千行百业，依托人工智能视觉分析技术以及强大的“端+边”算力支撑，实时分析烟火，入侵等事件，同时结合云上预警业务平台，实现事件发现、预警、处置全流程闭环。设计架构系统架构视频智能识别系统自下而上分为“感知层、网络层、支撑层、应用层”四层，系统逻辑架构如下图所示：感知层对接前端感知设备，如视频监控、NVR、和其他物联感知设备，对重要通道和场所
  • 前端优化可以从哪些方面下手及优化方案 光影少年 前端性能优化
    前端优化是提升网页性能、提升用户体验和降低服务器负担的重要手段。可以从多个角度入手，以下是一些常见的优化方向和方案：1.性能优化减少请求数量：尽量减少页面加载时发起的HTTP请求，例如使用合并文件（CSS和JS）、减少图片的请求。使用懒加载（LazyLoading）：对于图片、视频或组件，可以采用懒加载的方式，只有当用户需要时才加载。代码拆分（CodeSplitting）：使用Webpack或类似
  • 用vue3写一个好看的wiki前端页面 云浩舟 前端vue.jsjavascript
    以下是一个使用Vue3+ElementPlus实现的Wiki风格前端页面示例，包含现代设计、响应式布局和常用功能：TechWiki开发文档快速开始API参考部署指南数据分析数据规范可视化指南{{currentDoc.title}}草稿import{ref,reactive,computed}from'vue'import{marked}from'marked'importDOMPurifyfrom
  • swagger使用指引 MA_Y_ swagger
    1.swagger介绍在前后端分离开发中通常由后端程序员设计接口，完成后需要编写接口文档，最后将文档交给前端工程师，前端工程师参考文档进行开发。可以通过一些工具快速生成接口文档，本项目通过Swagger生成接口在线文档。什么是Swagger？OpenAPI规范（OpenAPISpecification简称OAS）是Linux基金会的一个项目，试图通过定义一种用来描述API格式或API定义的语言，来
  • 前端面试题常考汇总1 RayFars 前端
    JS部分1.解释JavaScript中的闭包，并举例说明其应用场景闭包是指函数能够记住并访问它的词法作用域，即使这个函数在词法作用域之外执行。应用场景：数据隐藏：通过闭包，可以创建私有变量，只通过特定的函数来访问和修改这些变量。回调函数和事件处理：闭包常用于设置回调函数，因为回调函数需要访问其外部函数的变量。functioncreateCounter(){letcount=0;returnfunc
  • 前端知识速记--css篇：CSS3中的常见动画及实现方式 无限大. #前端知识速记前端csscss3
    前端知识速记–css篇：CSS3中的常见动画及实现方式常见的CSS3动画1.过渡(Transitions)过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。语法格式：transition:propertydurationtiming-functiondelay;property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例
  • Web组件适配网页中iframe
    场景描述：当使用web组件加载带有iframe的页面时，由于H5的iframe标签的几个限制条件，可能会出现以下问题：1.由于iframe也要遵守浏览器同源策略，也有对应的白名单限制，所以也会出现跨域或者无法加载的问题，大多出现在本地或沙箱中的H5资源内联iframe时，并且cookie有时候也设置不上2.在应用侧调用runJavascript方法调用不到iframe里面，且主frame和ifra
  • JavaScript设计模式 -- 状态模式 鎈卟誃筅甡 javascript设计模式状态模式
    在软件开发中，很多对象的行为会随着其内部状态的变化而改变。如果将所有状态逻辑写在一个类中，代码不仅臃肿而且难以维护。**状态模式（StatePattern）**正是为了解决这个问题而设计的。通过将对象的状态封装成独立的状态类，并将状态相关的行为转移到这些状态类中，状态模式让对象在内部状态发生变化时自动切换行为，达到了将状态转换与行为实现分离的目的。本文将详细介绍状态模式的核心思想、基本结构与优缺点
  • vue h函数 月下第一风流 vue.jsjavascript前端
    在Vue.js中，h函数是用于在渲染函数中创建虚拟DOM元素的主要工具。但是，除了h函数之外，还有其他一些辅助函数和工具可以用于渲染函数和组件开发。以下是一些常见的工具和函数：createApp:用于创建Vue应用程序的实例。在Vue3中，这是启动应用的主要方法。defineComponent:用于定义一个组件。在Vue3中，这是一种定义组件的选项式API的替代方法。resolveComponen
  • 本地部署model scope魔搭大模型流程 CQller python算法深度学习机器学习jupyterpytorch
    一、安装python二、安装Gradio三、添加镜像加速四、运行字符串倒叙五、运行绘图六、安装常用软件包和库七、我目前使用的软件包和库简介八、文字生成图片AI模型九、文字回复AI模型一、安装python可参考安装步骤：python学习笔记-python安装与环境变量配置_python环境变量-CSDN博客二、安装Gradio在cmd执行以下命令。Gradio封装了功能丰富的前端用户界面，一会儿用来
  • springboot项目配置https 愿企鹅飞（｡ò ∀ ó｡） Javajavatomcatjarspringeclipse
    1，必须去服务商购买一个ssl证书。2，以我想的是这个域名的8080端口当前端，8070当后端，3，前端配置简单直接去下载nginx证书把里面的key和证书粘到对应位置即可（用宝塔简单）4.springboot后端服务（下载Tomcat证书）按照这个方法https://blog.csdn.net/baidu_37302589/article/details/100692957配置端口配置成我需要的
  • java web 项目中封装的下拉列表小组件：实现下拉列表使用者前后端0行代码 ... weixin_34383618 java前端后端ViewUI
    导读：主要从4个方面来阐述，1：背景；2：思路；3：代码实现；4：使用一：封装背景像easyui之类的纯前端组件，也有下拉列表组件，但是使用的时候，每个下拉列表，要配一个URL,以及设置URL反回来的值和select的text，和value的对应关系，这有2个问题：一使用者必须知道URL，二，如果页面有10个下拉表表，要请求后台10次，肯定影响性能，而我想要的是使用者只要申明用哪个数据字典就行了，
  • 在JS中如何转换时间格式 豆豆（前端开发+ui设计） javascript开发语言ecmascript
    在JavaScript中，如果你想要转换时间格式，通常涉及到的是日期对象的操作。JavaScript的Date对象提供了许多方法来处理和格式化日期和时间。以下是一些常用的方法来转换时间格式：1、获取日期和时间组件使用Date对象的方法来获取年、月、日、时、分、秒等组件，然后按照你需要的格式拼接字符串。letdate=newDate();letyear=date.getFullYear();//获取
  • 前端面试题2（vue3） GIS-CL 前端面试题前端vue.js
    1.Vue3中的CompositionAPI是什么？与OptionsAPI的区别是什么？答案：CompositionAPI是Vue3引入的一种新的编程模型，它允许开发者以更灵活和模块化的方式组织代码。与传统的OptionsAPI相比，CompositionAPI通过setup()函数集中管理组件的状态和行为，使得逻辑复用和代码组织变得更加容易。OptionsAPI：在Vue2中广泛使用，通过dat
  • 如何构建高效的 Vue 3 前端项目结构 东锋1.3 vue.jsvue.js前端javascript
    假如你正在深入开发一个Vue项目，起初一切感觉顺畅简单。但随着应用的增长，你的文件夹开始泛滥，组件变得混乱，寻找文件就像大海捞针。听起来熟悉吗？其实你并不孤单。一个有组织的文件结构是可扩展、可维护和高效前端开发的支柱。但关键问题是：没有一种放之四海而皆准的结构。完美的设置取决于你的项目规模、复杂性和团队动态。那么，如何开始呢？如何平衡简单性和可扩展性？在这篇文章中，我将分解Vue3项目的最优文件结
  • Cursor前端开发提示词分享 前端程序猿i 前端
    点击设置将提示词复制黏贴进输入框里即可Alwaysrespondin中文DONOTGIVEMEHIGHLEVELSTUFF,IFIASKFORFIXOREXPLANATION,IWANTACTUALCODEOREXPLANATION!!!IDON'TWANT"Here'showyoucanblablabla"-Youareaseniorfrontendengineer.-Ifcommandsnee
  • jQuery 键盘事件keydown ,keypress ,keyup介绍 107x jsjquerykeydownkeypresskeyup
    本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍，有需要了解的朋友可参考。 一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      
  • AngularJS中的Promise bijian1013 JavaScriptAngularJSPromise
    一.Promise         Promise是一个接口，它用来处理的对象具有这样的特点：在未来某一时刻（主要是异步调用）会从服务端返回或者被填充属性。其核心是，promise是一个带有then()函数的对象。         为了展示它的优点，下面来看一个例子，其中需要获取用户当前的配置文件： var cu
  • c++ 用数组实现栈类 CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T, int SIZE = 50> class Stack{ private: T list[SIZE];//数组存放栈的元素 int top;//栈顶位置 public: Stack(
  • java和c语言的雷同 麦田的设计者 java递归scaner
    软件启动时的初始化代码，加载用户信息2015年5月27号 从头学java二 1、语言的三种基本结构：顺序、选择、循环。废话不多说，需要指出一下几点：      a、return语句的功能除了作为函数返回值以外，还起到结束本函数的功能，return后的语句 不会再继续执行。      b、for循环相比于whi
  • LINUX环境并发服务器的三种实现模型 被触发 linux
    服务器设计技术有很多，按使用的协议来分有TCP服务器和UDP服务器。按处理方式来分有循环服务器和并发服务器。 1  循环服务器与并发服务器模型 在网络程序里面，一般来说都是许多客户对应一个服务器，为了处理客户的请求，对服务端的程序就提出了特殊的要求。 目前最常用的服务器模型有： ·循环服务器：服务器在同一时刻只能响应一个客户端的请求 ·并发服务器：服
  • Oracle数据库查询指令 肆无忌惮_ oracle数据库
    20140920   单表查询 -- 查询************************************************************************************************************ -- 使用scott用户登录   -- 查看emp表   desc emp  
  • ext右下角浮动窗口 知了ing JavaScriptext
    第一种 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
  • 浅谈REDIS数据库的键值设计 矮蛋蛋 redis
    http://www.cnblogs.com/aidandan/ 原文地址：http://www.hoterran.info/redis_kv_design 丰富的数据结构使得redis的设计非常的有趣。不像关系型数据库那样，DEV和DBA需要深度沟通，review每行sql语句，也不像memcached那样，不需要DBA的参与。redis的DBA需要熟悉数据结构，并能了解使用场景。
  • maven编译可执行jar包 alleni123 maven
    http://stackoverflow.com/questions/574594/how-can-i-create-an-executable-jar-with-dependencies-using-maven <build> <plugins> <plugin> <artifactId>maven-asse
  • 人力资源在现代企业中的作用 百合不是茶 HR 企业管理
    //人力资源在在企业中的作用人力资源为什么会存在，人力资源究竟是干什么的 人力资源管理是对管理模式一次大的创新，人力资源兴起的原因有以下点： 工业时代的国际化竞争，现代市场的风险管控等等。所以人力资源 在现代经济竞争中的优势明显的存在，人力资源在集团类公司中存在着 明显的优势(鸿海集团)，有一次笔者亲自去体验过红海集团的招聘，只 知道人力资源是管理企业招聘的 当时我被招聘上了，当时给我们培训 的人
  • Linux自启动设置详解 bijian1013 linux
    linux有自己一套完整的启动体系，抓住了linux启动的脉络，linux的启动过程将不再神秘。 阅读之前建议先看一下附图。 本文中假设inittab中设置的init tree为： /etc/rc.d/rc0.d /etc/rc.d/rc1.d /etc/rc.d/rc2.d /etc/rc.d/rc3.d /etc/rc.d/rc4.d /etc/rc.d/rc5.d /etc
  • Spring Aop Schema实现 bijian1013 javaspringAOP
    本例使用的是Spring2.5 1.Aop配置文件spring-aop.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmln
  • 【Gson七】Gson预定义类型适配器 bit1129 gson
    Gson提供了丰富的预定义类型适配器，在对象和JSON串之间进行序列化和反序列化时，指定对象和字符串之间的转换方式，   DateTypeAdapter   public final class DateTypeAdapter extends TypeAdapter<Date> { public static final TypeAdapterFacto
  • 【Spark八十八】Spark Streaming累加器操作（updateStateByKey) bit1129 update
    在实时计算的实际应用中，有时除了需要关心一个时间间隔内的数据，有时还可能会对整个实时计算的所有时间间隔内产生的相关数据进行统计。 比如： 对Nginx的access.log实时监控请求404时，有时除了需要统计某个时间间隔内出现的次数，有时还需要统计一整天出现了多少次404，也就是说404监控横跨多个时间间隔。   Spark Streaming的解决方案是累加器，工作原理是，定义
  • linux系统下通过shell脚本快速找到哪个进程在写文件 ronin47
    一个文件正在被进程写 我想查看这个进程 文件一直在增大 找不到谁在写 使用lsof也没找到 这个问题挺有普遍性的，解决方法应该很多，这里我给大家提个比较直观的方法。 linux下每个文件都会在某个块设备上存放，当然也都有相应的inode, 那么透过vfs.write我们就可以知道谁在不停的写入特定的设备上的inode。 幸运的是systemtap的安装包里带了inodewatch.stp，位
  • java-两种方法求第一个最长的可重复子串 bylijinnan java算法
    import java.util.Arrays; import java.util.Collections; import java.util.List; public class MaxPrefix { public static void main(String[] args) { String str="abbdabcdabcx";
  • Netty源码学习-ServerBootstrap启动及事件处理过程 bylijinnan javanetty
    Netty是采用了Reactor模式的多线程版本，建议先看下面这篇文章了解一下Reactor模式： http://bylijinnan.iteye.com/blog/1992325 Netty的启动及事件处理的流程，基本上是按照上面这篇文章来走的 文章里面提到的操作，每一步都能在Netty里面找到对应的代码 其中Reactor里面的Acceptor就对应Netty的ServerBo
  • servelt filter listener 的生命周期 cngolon filterlistenerservelt生命周期
    1. servlet    当第一次请求一个servlet资源时，servlet容器创建这个servlet实例，并调用他的 init(ServletConfig config)做一些初始化的工作，然后调用它的service方法处理请求。当第二次请求这个servlet资源时，servlet容器就不在创建实例，而是直接调用它的service方法处理请求，也就是说
  • jmpopups获取input元素值 ctrain JavaScript
    jmpopups 获取弹出层form表单 首先，我有一个div，里面包含了一个表单，默认是隐藏的，使用jmpopups时，会弹出这个隐藏的div，其实jmpopups是将我们的代码生成一份拷贝。 当我直接获取这个form表单中的文本框时，使用方法：$('#form input[name=test1]').val()；这样是获取不到的。 我们必须到jmpopups生成的代码中去查找这个值，$(
  • vi查找替换命令详解 daizj linux正则表达式替换查找vim
    一、查找 查找命令 /pattern<Enter> ：向下查找pattern匹配字符串 ?pattern<Enter>：向上查找pattern匹配字符串 使用了查找命令之后，使用如下两个键快速查找： n：按照同一方向继续查找 N：按照反方向查找 字符串匹配 pattern是需要匹配的字符串，例如： 1:  /abc<En
  • 对网站中的js,css文件进行打包 dcj3sjt126com PHP打包
    一，为什么要用smarty进行打包 apache中也有给js,css这样的静态文件进行打包压缩的模块，但是本文所说的不是以这种方式进行的打包，而是和smarty结合的方式来把网站中的js,css文件进行打包。 为什么要进行打包呢，主要目的是为了合理的管理自己的代码 。现在有好多网站，你查看一下网站的源码的话，你会发现网站的头部有大量的JS文件和CSS文件，网站的尾部也有可能有大量的J
  • php Yii: 出现undefined offset 或者 undefined index解决方案 dcj3sjt126com undefined
    在开发Yii 时，在程序中定义了如下方式：        if($this->menuoption[2] === 'test')，那么在运行程序时会报：undefined offset:2，这样的错误主要是由于php.ini 里的错误等级太高了，在windows下错误等级
  • linux 文件格式（1） sed工具 eksliang linuxlinux sed工具sed工具linux sed详解
    转载请出自出处： http://eksliang.iteye.com/blog/2106082 简介       sed 是一种在线编辑器，它一次处理一行内容。处理时，把当前处理的行存储在临时缓冲区中，称为“模式空间”（pattern space），接着用sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕。接着处理下一行，这样不断重复，直到文件末尾
  • Android应用程序获取系统权限 gqdy365 android
    引用 如何使Android应用程序获取系统权限         第一个方法简单点，不过需要在Android系统源码的环境下用make来编译：         1. 在应用程序的AndroidManifest.xml中的manifest节点
  • HoverTree开发日志之验证码 hvt .netC#asp.nethovertreewebform
    HoverTree是一个ASP.NET的开源CMS，目前包含文章系统，图库和留言板功能。代码完全开放，文章内容页生成了静态的HTM页面，留言板提供留言审核功能，文章可以发布HTML源代码，图片上传同时生成高品质缩略图。推出之后得到许多网友的支持，再此表示感谢！留言板不断收到许多有益留言，但同时也有不少广告，因此决定在提交留言页面增加验证码功能。ASP.NET验证码在网上找，如果不是很多，就是特别多
  • JSON API：用 JSON 构建 API 的标准指南中文版 justjavac json
    译文地址：https://github.com/justjavac/json-api-zh_CN 如果你和你的团队曾经争论过使用什么方式构建合理 JSON 响应格式， 那么 JSON API 就是你的 anti-bikeshedding 武器。 通过遵循共同的约定，可以提高开发效率，利用更普遍的工具，可以是你更加专注于开发重点：你的程序。 基于 JSON API 的客户端还能够充分利用缓存，
  • 数据结构随记_2 lx.asymmetric 数据结构笔记
    第三章 栈与队列 一．简答题 1. 在一个循环队列中，队首指针指向队首元素的  前一个    位置。  2.在具有n个单元的循环队列中，队满时共有  n-1  个元素。  3. 向栈中压入元素的操作是先  移动栈顶指针&n
  • Linux下的监控工具dstat 网络接口 linux
    1) 工具说明dstat是一个用来替换 vmstat,iostat netstat,nfsstat和ifstat这些命令的工具, 是一个全能系统信息统计工具. 与sysstat相比, dstat拥有一个彩色的界面, 在手动观察性能状况时, 数据比较显眼容易观察; 而且dstat支持即时刷新, 譬如输入dstat 3, 即每三秒收集一次, 但最新的数据都会每秒刷新显示. 和sysstat相同的是,
  • C 语言初级入门--二维数组和指针 1140566087 二维数组c/c++指针
    /* 二维数组的定义和二维数组元素的引用 二维数组的定义： 当数组中的每个元素带有两个下标时，称这样的数组为二维数组； (逻辑上把数组看成一个具有行和列的表格或一个矩阵); 语法： 类型名 数组名[常量表达式1][常量表达式2] 二维数组的引用： 引用二维数组元素时必须带有两个下标，引用形式如下： 例如： int a[3][4];  引用：
  • 10点睛Spring4.1-Application Event wiselyman application
    10.1 Application Event Spring使用Application Event给bean之间的消息通讯提供了手段 应按照如下部分实现bean之间的消息通讯 继承ApplicationEvent类实现自己的事件 实现继承ApplicationListener接口实现监听事件 使用ApplicationContext发布消息
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他