讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > js教程 > 正文

0

0

Vue实现原理的简单介绍

不言

不言

发布时间：2019-03-23 10:17:26

|

2351人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于vue实现原理的简单介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

用了Vue也有两年时间了，一直以来都是只知其然，不知其所以然，为了能更好的使用Vue不被Vue所奴役，学习一下Vue底层的基本原理。

Vue官网有一段这样的介绍：当你把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性，这也就是为什么Vue不支持 IE8 以及更低版本浏览器。

通过这一段的介绍不难可以得出，Vue是通过Object.defineProperty对实例中的data数据做了挟持并且使用Object.defineProperty的getter/setter并对其进行处理之后完成了数据的与视图的同步。

Vue实现原理的简单介绍前端免费学习笔记（深入）”；

这张图应该不会很陌生，熟悉Vue的同学如果仔细阅读过Vue文档的话应该都看到过。猜想一下Vue使用Object.defineProperty做为ViewModel，对数据进行挟持之后如果View和Model发生变化的话，就会通知其相对应引用的地方进行更新处理，完成视图的与数据的双向绑定。

下面举个例子：

html:

睿拓智能网站系统-网上商城
睿拓智能网站系统-网上商城

睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产

下载

javaScript:

var obj = {};
Object.defineProperty(obj,"name",{
    get() {
        return document.querySelector("#name").innerHTML;
    },
    set(val) {
        document.querySelector("#name").innerHTML = val;
    }
})
obj.name = "Aaron";

通过上面的代码使用Object.defineProperty对Obj对象中的name属性进行了挟持，一旦该属性发生了变化则会触发set函数执行，做出响应的操作。

扯了这么多，具体说一下Vue实现的原理。

  1. 需要数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。
  2. 需要指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
  3. 一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。
  4. MVVM入口函数，整合以上三者，实现数据响应。

Vue实现原理的简单介绍

{{name}}

{{age}}

{{doubleAge}}

%E4%BB%A5%E4%B8%8A%E4%BB%A3%E7%A0%81%E5%88%99%E6%98%AF%E9%9C%80%E8%A6%81%E5%AE%8C%E6%88%90%E7%9A%84%E5%8A%9F%E8%83%BD%EF%BC%8C%E4%BF%9D%E8%AF%81%E6%89%80%E6%9C%89%E5%8A%9F%E8%83%BD%E5%85%A8%E9%83%A8%E9%83%BD%E8%83%BD%E5%AE%9E%E7%8E%B0%E3%80%82

%E9%A6%96%E5%85%88%E6%88%91%E4%BB%AC%E8%A6%81%E8%80%83%E8%99%91%E7%9A%84%E6%98%AF%EF%BC%8C%E8%A6%81%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AAVue%E7%9A%84%E7%B1%BB%EF%BC%8C%E8%AF%A5%E7%B1%BB%E6%8E%A5%E6%94%B6%E7%9A%84%E6%98%AF%E4%B8%80%E4%B8%AAoptions%E7%9A%84%E5%AF%B9%E8%B1%A1%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E6%88%91%E4%BB%AC%E5%9C%A8%E5%AE%9E%E4%BE%8B%E5%8C%96Vue%E7%9A%84%E6%97%B6%E5%80%99%E9%9C%80%E8%A6%81%E4%BC%A0%E9%80%92%E7%9A%84%E5%8F%82%E6%95%B0%E3%80%82

class QVue {
    constructor(options){
        //  缓存options对象数据
        this.$options = options;
        //  取出data数据，做数据响应
        this.$data = options.data || {};
    }
}

%E9%80%9A%E8%BF%87%E4%B8%8A%E9%9D%A2%E7%9A%84%E4%BB%A3%E7%A0%81%E5%8F%AF%E4%BB%A5%E7%9C%8B%E5%87%BA%E4%BA%86%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E4%BB%AC%E5%8F%AF%E4%BB%A5%E5%9C%A8Vue%E5%AE%9E%E4%BE%8B%E4%B8%8A%E9%80%9A%E8%BF%87this.%24data%E6%8B%BF%E5%88%B0%E6%88%91%E4%BB%AC%E6%89%80%E5%86%99%E7%9A%84data%E6%95%B0%E6%8D%AE%E3%80%82

%E5%AF%B9%E6%95%B0%E6%8D%AE%E5%B7%B2%E7%BB%8F%E8%BF%9B%E8%A1%8C%E4%BA%86%E7%BC%93%E5%AD%98%E4%B9%8B%E5%90%8E%EF%BC%8C%E6%8E%A5%E4%B8%8B%E6%9D%A5%E8%A6%81%E5%81%9A%E7%9A%84%E4%BA%8B%E6%83%85%E5%B0%B1%E6%98%AF%E5%AF%B9%E6%95%B0%E6%8D%AE%E8%BF%9B%E8%A1%8C%E8%A7%82%E5%AF%9F%EF%BC%8C%E8%BE%BE%E5%88%B0%E6%95%B0%E6%8D%AE%E5%8F%98%E5%8C%96%E4%B9%8B%E5%90%8E%E8%83%BD%E5%A4%9F%E5%81%9A%E5%87%BA%E5%AF%B9%E8%99%9A%E6%8B%9FDom%E7%9A%84%E6%93%8D%E4%BD%9C%E3%80%82

class QVue {
    constructor(options){
        this.$options = options;
        //  数据响应
        this.$data = options.data || {};
        //  监听数据变化
        this.observe(this.$data);
        //  主要用来解析各种指令，比如v-modal，v-on:click等指令
        new Compile(options.el,this);
        //  执行生命周期
        if(options.created){
            options.created.call(this);
        }
    }
    // 观察数据变化
    observe(value){
        if(!value || typeof value !== "object"){
            return;
        }
        let keys = Object.keys(value);
        keys.forEach((key)=> {
            this.defineReactive(value,key,value[key]);
            //  代理data中的属性到vue实例上
            this.proxyData(key);
        })
    }
    //  代理Data
    proxyData(key){
        Object.defineProperty(this,key,{
            get(){
                return this.$data[key];
            },
            set(newVal){
                this.$data[key] = newVal;
            }
        })
    }
    //  数据响应
    defineReactive(obj,key,val){
        //  解决数据层次嵌套
        this.observe(val);
        const dep = new Dep();
        Object.defineProperty(obj, key,{
            get(){
                //  向管理watcher的对象追加watcher实例
                //  方便管理
                Dep.target && dep.appDep(Dep.target);
                return val;
            },
            set(newVal){
                if(newVal === val){
                    return;
                }
                val = newVal;
                // console.log(`${key}更新了：${newVal}`)
                dep.notify();
            }
        })
    }
}

%E6%88%91%E4%BB%AC%E5%AF%B9data%E6%95%B0%E6%8D%AE%E4%B8%AD%E7%9A%84%E6%AF%8F%E4%B8%80%E9%A1%B9%E9%83%BD%E8%BF%9B%E8%A1%8C%E4%BA%86%E6%95%B0%E6%8D%AE%E6%8C%9F%E6%8C%81%EF%BC%8C%E5%8F%AF%E6%98%AF%E7%84%B6%E8%80%8C%E5%B9%B6%E6%B2%A1%E6%9C%89%E4%BB%80%E4%B9%88%E5%8D%B5%E7%94%A8%E5%95%8A%EF%BC%8C%E6%88%91%E4%BB%AC%E5%B9%B6%E6%B2%A1%E6%9C%89%E5%AF%B9%E7%9B%B8%E5%AF%B9%E5%BA%94%E7%9A%84%E8%99%9A%E6%8B%9Fdom%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E6%94%B9%E5%8F%98%EF%BC%8C%E5%BD%93%E7%84%B6%E6%88%91%E4%BB%AC%E8%82%AF%E5%AE%9A%E6%98%AF%E4%B8%8D%E8%83%BD%E6%8A%8A%E6%88%91%E4%BB%AC%E7%9A%84%E9%9C%80%E8%A6%81%E6%9B%B4%E6%94%B9%E7%9A%84%E8%99%9A%E6%8B%9Fdom%E6%93%8D%E4%BD%9C%E5%86%99%E5%9C%A8%E8%BF%99%E9%87%8C%EF%BC%8C%E7%84%B6%E8%80%8C%E5%9C%A8Vue%E4%B8%AD%E5%AF%B9%E5%85%B6Dom%E8%BF%9B%E8%A1%8C%E4%BA%86%E7%89%B9%E6%AE%8A%E7%9A%84%E5%A4%84%E7%90%86%EF%BC%8C%E6%85%A2%E6%85%A2%E7%9A%84%E5%90%91%E4%B8%8B%E7%9C%8B%E3%80%82

%E6%83%B3%E8%A6%81%E5%81%9A%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E8%A6%81%E5%81%9A%E4%B8%80%E4%B8%AA%E5%81%9A%E5%85%B7%E4%BD%93%E6%9B%B4%E6%96%B0%E7%9A%84%E7%B1%BB%E4%BD%95%E4%BB%A5%E7%94%A8%E6%9D%A5%E7%AE%A1%E7%90%86%E8%BF%99%E4%BA%9B%E8%A7%82%E5%AF%9F%E8%80%85%E7%9A%84%E7%B1%BB

//  管理watcher
class Dep {
    constructor() {
        //  存储
        this.deps = [];
    }
    //  添加watcher
    appDep(dep){
        this.deps.push(dep);
    }
    //  通知所有的watcher进行更新
    notify(){
        this.deps.forEach((dep) => {
            dep.update();
        })
    }
}
//  观察者 做具体更新
class Watcher {
    constructor(vm,key,cb){
        //  Vue实例
        this.vm = vm;
        //  需要更新的key
        this.key = key;
        //  更新后执行的函数
        this.cb = cb;
        //  将当前watcher实例指定到Dep静态属性target
        //  用来在类间进行通信
        Dep.target = this;
        //  触发getter,添加依赖
        this.vm[this.key];
        Dep.target = null;
    }
    update(){
        this.cb.call(this.vm,this.vm[this.key]);
    }
}

Dep.target%20=%20this%E4%B8%8A%E9%9D%A2%E8%BF%99%E6%AE%B5%E4%BB%A3%E7%A0%81%E4%B8%80%E5%AE%9A%E8%A6%81%E6%B3%A8%E6%84%8F%EF%BC%8C%E6%98%AF%E5%90%91Dep%E7%B1%BB%E4%B8%AD%E6%B7%BB%E5%8A%A0%E4%BA%86%E4%B8%80%E4%B8%AA%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7%E3%80%82

%E4%B8%BB%E8%A6%81%E7%94%A8%E6%9D%A5%E8%A7%A3%E6%9E%90%E5%90%84%E7%A7%8D%E6%8C%87%E4%BB%A4%EF%BC%8C%E6%AF%94%E5%A6%82v-modal%EF%BC%8Cv-on:click%E7%AD%89%E6%8C%87%E4%BB%A4%E3%80%82%E7%84%B6%E5%90%8E%E5%B0%86%E6%A8%A1%E7%89%88%E4%B8%AD%E7%9A%84%E5%8F%98%E9%87%8F%E6%9B%BF%E6%8D%A2%E6%88%90%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%B8%B2%E6%9F%93view%EF%BC%8C%E5%B0%86%E6%AF%8F%E4%B8%AA%E6%8C%87%E4%BB%A4%E5%AF%B9%E5%BA%94%E7%9A%84%E8%8A%82%E7%82%B9%E7%BB%91%E5%AE%9A%E6%9B%B4%E6%96%B0%E5%87%BD%E6%95%B0%EF%BC%8C%E6%B7%BB%E5%8A%A0%E7%9B%91%E5%90%AC%E6%95%B0%E6%8D%AE%E7%9A%84%E8%AE%A2%E9%98%85%E8%80%85%EF%BC%8C%E4%B8%80%E6%97%A6%E6%95%B0%E6%8D%AE%E5%8F%91%E7%94%9F%E5%8F%98%E5%8A%A8%EF%BC%8C%E6%94%B6%E5%88%B0%E9%80%9A%E7%9F%A5%EF%BC%8C%E6%9B%B4%E6%96%B0%E8%A7%86%E5%9B%BE%E3%80%82

%E7%AE%80%E5%8D%95%E8%AF%B4%E4%B8%8B%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%EF%BC%8C%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%EF%BC%8C%E5%9C%A8%E7%BC%96%E8%AF%91%E7%9A%84%E6%97%B6%E5%80%99%E5%8F%AF%E4%BB%A5%E8%A7%A3%E6%9E%90%E5%87%BAv-model%E5%9C%A8%E5%81%9A%E6%93%8D%E4%BD%9C%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E5%9C%A8%E4%BD%BF%E7%94%A8v-model%E5%85%83%E7%B4%A0%E4%B8%8A%E6%B7%BB%E5%8A%A0%E4%BA%86%E4%B8%80%E4%B8%AA%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%EF%BC%88input%EF%BC%89%EF%BC%8C%E6%8A%8A%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E7%9A%84%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E4%BD%9C%E4%B8%BA%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E7%9A%84%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%EF%BC%8C%E5%A6%82%E6%9E%9Cinput%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E7%9A%84%E6%97%B6%E5%80%99%E6%8A%8A%E6%9C%80%E6%96%B0%E7%9A%84%E5%80%BC%E8%AE%BE%E7%BD%AE%E5%88%B0vue%E7%9A%84%E5%AE%9E%E4%BE%8B%E4%B8%8A%EF%BC%8C%E5%9B%A0%E4%B8%BAvue%E5%B7%B2%E7%BB%8F%E5%AE%9E%E7%8E%B0%E4%BA%86%E6%95%B0%E6%8D%AE%E7%9A%84%E5%93%8D%E5%BA%94%E5%8C%96%EF%BC%8C%E5%93%8D%E5%BA%94%E5%8C%96%E7%9A%84set%E5%87%BD%E6%95%B0%E4%BC%9A%E8%A7%A6%E5%8F%91%E7%95%8C%E9%9D%A2%E4%B8%AD%E6%89%80%E6%9C%89%E4%BE%9D%E8%B5%96%E6%A8%A1%E5%9D%97%E7%9A%84%E6%9B%B4%E6%96%B0%EF%BC%8C%E7%84%B6%E5%90%8E%E9%80%9A%E7%9F%A5%E5%93%AA%E4%BA%9Bmodel%E5%81%9A%E4%BE%9D%E8%B5%96%E6%9B%B4%E6%96%B0%EF%BC%8C%E6%89%80%E4%BB%A5%E7%95%8C%E9%9D%A2%E4%B8%AD%E6%89%80%E6%9C%89%E8%B7%9F%E8%BF%99%E4%B8%AA%E6%95%B0%E6%8D%AE%E6%9C%89%E7%AE%A1%E7%9A%84%E4%B8%9C%E8%A5%BF%E5%B0%B1%E6%9B%B4%E6%96%B0%E4%BA%86%E3%80%82

class Compile {
    constructor(el,vm) {
        //  要遍历的宿主节点
        this.$el = document.querySelector(el);
        this.$vm = vm;

        //  编译
        if(this.$el){
            //  转换宿主节点内容为片段Fragment元素
            this.$fragment = this.node2Fragment(this.$el);
            //  执行编译过程
            this.compile(this.$fragment);
            //  将编译完的HTML结果追加至宿主节点中
            this.$el.appendChild(this.$fragment);
        }
    }

    //  将宿主元素中代码片段取出来，遍历，这样做比较高效
    node2Fragment(el){
        const frag = document.createDocumentFragment();
        //  将宿主元素中所有子元素**（搬家，搬家，搬家）**至frag中
        let child;
        //  如果 el.firstChild 为undefined或null则会停止循环
        while(child = el.firstChild){
            frag.appendChild(child);
        }
        return frag;
    }

    compile(el){
        //  宿主节点下的所有子元素
        const childNodes = el.childNodes;
        Array.from(childNodes).forEach((node) => {
            if(this.isElement(node)){
                //  如果是元素
                console.log("编译元素"+node.nodeName)
                //  拿到元素上所有的执行,伪数组
                const nodeAttrs = node.attributes;
                Array.from(nodeAttrs).forEach((attr) => {
                    //  属性名
                    const attrName = attr.name; 
                    //  属性值
                    const exp = attr.value;     
                    //  如果是指令
                    if(this.isDirective(attrName)){
                        //  q-text
                        //  获取指令后面的内容
                        const dir = attrName.substring(2);
                        //  执行更新
                        this[dir] && this[dir](node,this.$vm,exp);
                    }
                    //  如果是事件
                    if(this.isEvent(attrName)){
                        //  事件处理
                        let dir = attrName.substring(1);    //  @
                        this.eventHandler(node,this.$vm,exp,dir);
                    }
                })
            }else if(this.isInterpolation(node)){
                //  如果是插值文本
                this.compileText(node);
                console.log("编译文本"+node.textContent)
            }
            //  递归子元素，解决元素嵌套问题
            if(node.childNodes && node.childNodes.length){
                this.compile(node);
            }
        })
    }
    //  是否为节点
    isElement(node){
        return node.nodeType === 1;
    }
    //  是否为插值文本
    isInterpolation(node){
        return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent);
    }
    //  是否为指令
    isDirective(attr){
        return attr.indexOf("q-") == 0;
    }
    // 是否为事件
    isEvent(attr){
        return attr.indexOf("@") == 0;
    }

    //  v-text
    text(node,vm,exp){
        this.update( node, vm, exp, "text");
    }
    textUpdater(node,value){
        node.textContent = value;
    }

    //  双向绑定
    //  v-model
    model(node,vm,exp){
        //  指定input的value属性，模型到视图的绑定
        this.update(node,vm,exp,"model");
        //  试图对模型的响应
        node.addEventListener('input',(e) => {
            vm[exp] = e.target.value;
        })
    }
    modelUpdater(node,value){
        node.value = value;
    }

    //  v-html
    html(node,vm,exp){
        this.update(node,vm,exp,"html")
    }
    htmlUpdater(node,value){
        node.innerHTML = value;
    }
    
    //  更新插值文本
    compileText(node){
        let key = RegExp.$1;
        this.update( node, this.$vm, key, "text");
    }
    //  事件处理器
    eventHandler(node,vm,exp,dir){
        let fn = vm.$options.methods && vm.$options.methods[exp];
        if(dir && fn){
            node.addEventListener(dir,fn.bind(vm));
        }
    }

    //  更新函数 - 桥接
    update(node,vm,exp,dir){
        const updateFn = this[`${dir}Updater`];
        //  初始化
        updateFn && updateFn(node,vm[exp]);
        //  依赖收集
        new Watcher(vm,exp,function(value){
            updateFn && updateFn(node,value);
        })
    }
}

%E5%85%B6%E5%AE%9ECompile%E6%95%B4%E4%B8%AA%E7%BC%96%E8%AF%91%E8%BF%87%E7%A8%8B%EF%BC%8C%E5%B0%B1%E6%98%AF%E5%9C%A8%E5%81%9A%E4%B8%80%E4%B8%AA%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%86%E7%9A%84%E5%B7%A5%E4%BD%9C%EF%BC%8C%E7%84%B6Vue%E7%9F%A5%E9%81%93%E6%AF%8F%E4%B8%80%E4%B8%AA%E6%8C%87%E4%BB%A4%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%E3%80%82%E5%B9%B6%E5%81%9A%E5%87%BA%E5%AF%B9%E5%BA%94%E7%9A%84%E6%9B%B4%E6%96%B0%E5%A4%84%E7%90%86%E3%80%82

Vue%E6%95%B4%E4%BD%93%E7%9A%84%E7%BC%96%E8%AF%91%E8%BF%87%E7%A8%8B%EF%BC%8C%E5%9B%A0%E4%B8%BAvue%E6%89%80%E7%BC%96%E5%86%99%E7%9A%84%E6%8C%87%E4%BB%A4html%E6%97%A0%E6%B3%95%E8%BF%9B%E8%A1%8C%E8%AF%86%E5%88%AB%EF%BC%8C%E9%80%9A%E8%BF%87%E7%BC%96%E8%AF%91%E7%9A%84%E8%BF%87%E7%A8%8B%E5%8F%AF%E4%BB%A5%E8%BF%9B%E8%A1%8C%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%86%EF%BC%8C%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%86%E4%BB%A5%E5%90%8E%E6%8A%8Adata%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%92%8C%E8%A7%86%E5%9B%BE%E8%BF%9B%E8%A1%8C%E4%BA%86%E5%85%B3%E8%81%94%EF%BC%8C%E4%BA%A7%E7%94%9F%E4%BA%86%E4%BE%9D%E8%B5%96%E5%85%B3%E7%B3%BB%EF%BC%8C%E5%A6%82%E6%9E%9C%E4%BB%A5%E5%90%8E%E6%95%B0%E6%8D%AE%E6%A8%A1%E5%9E%8B%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E6%88%91%E4%BB%AC%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E8%BF%99%E4%BA%9B%E4%BE%9D%E8%B5%96%E9%80%9A%E7%9F%A5%E8%BF%99%E4%BA%9B%E8%A7%86%E5%9B%BE%E8%BF%9B%E8%A1%8C%E6%9B%B4%E6%96%B0%EF%BC%8C%E8%BF%99%E6%98%AF%E6%89%A7%E8%A1%8C%E7%BC%96%E8%AF%91%E7%9A%84%E7%9B%AE%E7%9A%84%EF%BC%8C%E5%B0%B1%E5%8F%AF%E4%BB%A5%E5%81%9A%E5%88%B0%E6%95%B0%E6%8D%AE%E6%A8%A1%E5%9E%8B%E9%A9%B1%E5%8A%A8%E8%A7%86%E5%9B%BE%E5%8F%98%E5%8C%96%E3%80%82

">

相关文章

如何理解javascript中的函数式编程？_不可变性在javascript函数式编程中为何重要？

javascript能做什么_除了网页交互还能开发哪些应用

如何实现JavaScript文件上传_如何处理大文件分片上传

JavaScript怎样处理错误边界_JavaScript中错误捕获有哪些方法

JavaScript如何实现语音识别_怎样将语音转为文本

相关标签:

javascript vue.js

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Angular中的Firebase身份验证（代码示例） 下一篇：JavaScript中的var和let的区别（代码示例）

作者最新文章

如何在两个内联元素之间添加换行符

2019-04-15 14:06

ps反向选区快捷键是什么？

2019-04-15 15:37

编程适合什么人学？

2019-04-15 16:23

PS标尺怎么用？

2019-04-15 16:46

ctrl+t是什么快捷键？

2019-04-16 10:06

ctrl加什么是保存？

2019-04-16 10:43

it是什么职业？

2019-04-16 11:48

剪切快捷键ctrl加什么？

2019-04-16 14:02

查找的快捷键是ctrl键加上什么键

2019-04-16 14:55

编程是什么？

2019-04-16 16:04

热门AI工具

更多
DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台
豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型
通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型
腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格
文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作
讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具
即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成
ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

更多
虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程，阅读下面的文章了解更多详细操作。

29

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法，阅读专题下面的文章了解更多处理方案。

20

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容，阅读下面的文章了解更多详细内容。后续继续更新。

37

2025.12.25

word转换成ppt教程大全
word转换成ppt教程大全

本专题整合了word转换成ppt教程，阅读专题下面的文章了解更多详细操作。

6

2025.12.25

msvcp140.dll丢失相关教程
msvcp140.dll丢失相关教程

本专题整合了msvcp140.dll丢失相关解决方法，阅读专题下面的文章了解更多详细操作。

2

2025.12.25

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法，阅读专题下面的文章了解更多详细内容。

6

2025.12.25

微信调黑色模式教程
微信调黑色模式教程

本专题整合了微信调黑色模式教程，阅读下面的文章了解更多详细内容。

5

2025.12.25

ps入门教程
ps入门教程

本专题整合了ps相关教程，阅读下面的文章了解更多详细内容。

4

2025.12.25

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/，该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

218

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
纯CSS3水平手风琴分享按钮菜单
实用图片悬停悬浮展示文字JS特效代码

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.6万人学习

最新文章

更多
JavaScript 类属性异步赋值导致 undefined 的解决方案
javascript如何实现字符串模板_它比字符串拼接好在哪里
JavaScript如何实现实时通信_WebSocket如何建立连接？
javascript怎样操作URL参数_如何实现路由状态保持
javascript异步编程是什么_回调函数如何工作
如何理解javascript中的函数式编程？_不可变性在javascript函数式编程中为何重要？
javascript能做什么_除了网页交互还能开发哪些应用
如何实现JavaScript文件上传_如何处理大文件分片上传
JavaScript怎样处理错误边界_JavaScript中错误捕获有哪些方法
JavaScript如何实现语音识别_怎样将语音转为文本
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部