vue3.0 和 2.0的差异

Posted 2023-03-31

参考技术A 对比学习2.0和3.0 并记录学习收获:

· 3.0比2.0 快2倍

·  3.0去掉了filter, 么有beforeCreate created,用setup取代

· reactivity是可以单独作为库使用的 

· 单独功能可以抽离 取代了mixin  优于mixin 解决上下反复横跳

· 支持多个子节点 fragment

· setup里没有this

· Proxy实现响应式不需要set delete  兼容性并不好

· 响应式方面 性能得到很大提升 不用初始化的时候就递归遍历属性

· 响应式不区分数组和对象

· 3.0兼容IE12以上

· composition api 可以和 options API 同时存在

Vue 和 Vue 资源

【中文标题】Vue 和 Vue 资源

【英文标题】：Vue and Vue Resource

【发布时间】：2016-03-23 05:03:48

【问题描述】：

我正在尝试通过 vue-resource 发送一个帖子请求，但我似乎无法弄清楚我做错了什么。

我正在使用 Laravel 5.1 来处理请求。

以下 jquery 代码在我的 Vue 方法中运行良好。

 $.ajax(
        type: 'POST',
        url: '/purchase/save-cart-items',
        data:  'purchaseItems' : purchaseItems,
        success: function (response) 
            if(response == "ok") 
                alert("Cart saved successfully.");   
             else 
                alert('There was a problem saving this cart. Please try again.');
            
        
    );

但是，由于某种原因，将上面的 jquery 替换为以下 vue-resource 发布请求不起作用。我确定这很简单，但我似乎无法弄清楚。 Vue 资源已正确包含在项目中，因为我将它用于获取请求而没有问题。

this.$http.post('/purchase/save-cart-items', purchaseItems:purchaseItems, function (data, status, request) 
    alert("Cart saved successfully.");
).error(function (data, status, request) 
    alert('There was a problem saving this cart. Please try again.');
);

【问题讨论】：

通话结束时您的浏览器控制台会显示什么？使用 Chrome 的网络检查器的网络面板检查请求和响应。

【参考方案1】：

Vue 的作者已停止更新和维护 vue-resource。他自己也建议使用 axios，axios 更易于使用和易于维护。 axios introduction

如果您刚开始学习 Vue，这里有一个入门级演示。虽然只是一个小应用，但是涵盖了很多知识点（vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack），包括前端、后端、数据库等网站的一些必要元素，对我来说，学习意义重大，希望互相鼓励！

Github Demo

【参考方案2】：

代码应该是：

 this.$http.post('purchase/save-cart-items', purchaseItems:purchaseItems)
        .success(function (data, status, request) 
            alert("Cart saved successfully.");
        )
        .error(function (data, status, request) 
            alert('There was a problem saving this cart. Please try again.');
        );

或尝试使用 tymon/jwt-auth 包

【参考方案3】：

代码应该是：

this.$http.post('/purchase/save-cart-items', purchaseItems:purchaseItems)
    .success(function (data, status, request) 
        alert("Cart saved successfully.");
    )
    .error(function (data, status, request) 
        alert('There was a problem saving this cart. Please try again.');
    );

【讨论】：

感谢您的回答，但该代码的格式不正确。

你说得对，我用正确的代码编辑了我的帖子。

【参考方案4】：

您可能缺少 csrf 令牌：

html

<meta id="token" name="token" content=" csrf_token() ">

js

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

【讨论】：

谢谢 - 那是错误。我忘记了这一点，因为我用 $(document).ready(function() $.ajaxSetup( headers: 'X-CSRF-TOKEN': $('meta[name="csrf- token"]').attr('content') ); );所以jquery起作用了。但是，这不会将自身附加到 vue-resource 请求。

csrf_token Lavarel 有关系吗？

是的，它是在 laravel/framework/src/Illuminate/Foundation/helpers.php 中定义的